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

【问题标题】：How can I check based on the url if a file is a audio or video file with Vue.js如果文件是带有 Vue.js 的音频或视频文件，我如何根据 url 检查
【发布时间】：2021-04-13 16:29:33
【问题描述】：

我有一个包含音频和视频媒体文件组合的 Vuetify 播放列表。如果是视频，我需要能够启动视频播放器；如果是 .mp3，我需要能够启动 html5 音频组件：

        <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'
      }]

...

非常感谢任何建议或正确方向的观点。

【问题讨论】：

您可以检查 URL 是否以 .mp3 或 .mp4 或任何其他文件类型特定扩展名结尾....尽管使用 YouTube 之类的 URL，您不会走得太远

标签： javascript vue.js vuetify.js

【解决方案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 是字符串，所以我认为没有其他方法

【讨论】：