I am currently working on a Vuetify playlist that contains a mix of audio and video media files. My goal is to create functionality that allows me to launch a video player if the file is a video, or utilize the html5 audio component for .mp3 files:
<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>
The distinguishing factor in my data lies within the URL structure:
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'
}]
...
If you have any advice or can point me in the right direction, I would greatly appreciate it.