vue-video-player 播放多个视频
时间: 2023-09-30 14:08:03 浏览: 80
要在Vue中使用vue-video-player播放多个视频,你可以通过在组件中使用v-for指令来循环渲染多个video标签。首先,你需要在组件中引入vue-video-player,并在data属性中定义一个视频列表的数组。然后,你可以使用v-for指令迭代视频列表,并在每个循环中动态设置video标签的src属性为不同的视频链接。最后,你可以在每个video标签中添加controls属性以显示视频播放器的控制栏。下面是一个简单的示例代码:
```
<template>
<div>
<div v-for="video in videoList" :key="video.id">
<video :src="video.url" controls></video>
</div>
</div>
</template>
<script>
import VideoPlayer from 'vue-video-player'
export default {
components: {
VideoPlayer
},
data() {
return {
videoList: [
{ id: 1, url: '视频链接1' },
{ id: 2, url: '视频链接2' },
{ id: 3, url: '视频链接3' }
]
}
}
}
</script>
```
在上面的示例中,videoList是一个包含多个视频信息的数组。使用v-for指令,我们遍历videoList数组,为每个视频创建一个video标签,并将视频链接设置为src属性的值。通过添加controls属性,实现视频播放器的控制栏显示。你可以根据实际需求修改视频列表的数据结构和视频链接。