如果文件是帶有 Vue.js 的音頻或視頻文件，我如何根據 url 檢查

Question

我有一個包含音頻和視頻媒體文件組合的 Vuetify 播放列表。 如果是視頻，我需要能夠啟動視頻播放器或使用 html5 音頻組件 if.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 是字符串，我認為沒有其他方法