如果文件是 Vue.js 的音频或视频文件，我如何根据 url 检查

Question

我有一个 Vuetify 播放列表，其中包含音频和视频媒体文件的组合。我需要能够启动视频播放器（如果是视频）或使用 html5 音频组件（如果是 .mp3:

）

        <v-list-item
          v-for="media in media"
          :key="media.title"
          class="mb-2"
        >
          <v-list-item-content
            class="pa-4"
          >
            <v-list-item-title
              class="title"
              v-text="media.title"
            />
          </v-list-item-content>

          <v-list-item-action>
            <v-btn
              v-else
              icon
              large
              @click="play(media)"
            >
              <v-icon>play_arrow</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>

在我的数据中，唯一的指标是 URL 结构：

 data: () => ({
    media: [
      {
        id: 0,
        title: 'Exploring the culture at GSK',
        url: 'https://youtu.be/RBdgq5VTQmM'
      },
      {
        id: 1,
        title: 'The meaning of digital innovation: the pharmaphorum podcast',
        url: 'https://mcdn.podbean.com/mf/web/vji3n3/Episode_32_Omnipresence_March2021_mixdown8nikx.mp3'
      }]

...

任何正确方向的建议或观点将不胜感激。

Answer 1

像这样怎么样：

<template>
  <div id="app">
    <v-list-item v-for="media in media" :key="media.title" class="mb-2">
      <audio v-if="media.url.includes('mp3')" />
      <video v-else />
    </v-list-item>
  </div>
</template>

因为 URL 是字符串，我认为没有其他方法

如果文件是 Vue.js 的音频或视频文件，我如何根据 url 检查

How can I check based on the url if a file is a audio or video file with Vue.js

javascript

vue.js

vuetify.js