vue video.js 动态渲染多个直播流视频

在Vue中使用video.js动态渲染多个直播流视频是可行的。首先，您需要引入video.js和相应的插件。

1. 安装video.js：
您可以使用npm或yarn来安装video.js库，`npm install video.js`或`yarn add video.js`。

2. 在Vue组件中导入video.js：
在您的Vue组件中，您需要导入video.js和任何其他相关的插件。您可以使用以下语句进行导入：

import videojs from 'video.js';
import 'video.js/dist/video-js.css'; // 导入video.js的CSS样式文件

3. 创建Vue组件：
创建一个Vue组件，用于渲染video.js播放器。在组件中，您可以使用`v-for`指令来动态渲染多个视频。

<template>
  <div>
    <!-- 使用v-for指令渲染多个video标签，每个video标签都有唯一的ID和video.js的class -->
    <video v-for="video in videos" :key="video.id" :id="video.id" class="video-js"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 'video1', src: 'http://livestreamurl1' },
        { id: 'video2', src: 'http://livestreamurl2' },
        // 添加更多的视频
      ]
    };
  },
  mounted() {
    // 在组件挂载后，使用video.js动态创建播放器
    this.videos.forEach(video => {
      videojs(video.id, { sources: [{ src: video.src, type: 'application/x-mpegURL' }] });
    });
  }
};
</script>

上述代码中使用了v-for指令来循环渲染多个video标签，并为每个video标签添加了唯一的ID和video.js的class。在组件挂载后，使用video.js的API为每个video标签创建播放器，并传入相应的视频源。

这样就能够实现在Vue中动态渲染多个直播流视频了。记得在组件销毁时销毁播放器，以及根据需要进行其他配置和功能的设置。