如何在Vue中使用vue-video-player组件连续播放多个M3U8流

在Vue中使用vue-video-player组件连续播放多个M3U8流，你可以按照以下步骤操作：

1. 安装`vue-video-player`：首先，你需要在项目中安装这个视频播放组件，可以使用npm或yarn：

   npm install vue-video-player @vue/video-player --save
   # 或者
   yarn add vue-video-player @vue/video-player

2. 引入组件：在你的Vue文件中引入`VueVideoPlayer`组件：

   import Vue from 'vue';
   import { VueVideoPlayer } from '@vue/video-player';
   Vue.use(VueVideoPlayer);

3. 创建M3U8列表：在数据对象中定义一个数组，包含每个M3U8流的URLs：

   export default {
     data() {
       return {
         videoUrls: [
           'http://your-m3u8-url-1.m3u8',
           'http://your-m3u8-url-2.m3u8',
           // 添加更多的URL...
         ]
       };
     },
   }

4. 使用动态视频源：在模板中，遍历`videoUrls`数组，并为每个URL创建一个独立的`<vue-video-player>`实例：

   <template>
     <div v-for="(url, index) in videoUrls" :key="index">
       <vue-video-player ref="player{{ index }}" :src="url"></vue-video-player>
     </div>
   </template>

5. 监听上一视频结束：为每个`VueVideoPlayer`实例添加事件监听器，在视频结束时切换到下一个视频。你可以使用`@ended`事件配合`ref`属性：

   mounted() {
     this.$refs.player0.$on('ended', () => {
       if (this.videoUrls.length > 1) {
         const nextIndex = (this.$refs.player0.$el.dataset.index + 1) % this.videoUrls.length;
         this.$refs.player0.$off('ended');
         this.$refs.player0.pause();
         this.$nextTick(() => {
           this.$refs.player{{ nextIndex }}.$play();
         });
       }
     });
   },

6. 更新循环：当视频播放列表发生变化时（比如新增或删除），记得更新`mounted`生命周期钩子，确保正确处理所有视频。