vue + flv.js 实现多视频监控播放

以下是一个使用Vue和flv.js实现多视频监控播放的简化示例：

首先，确保你已经安装了flv.js。如果没有，可以通过npm安装：

npm install flv.js

然后，在你的Vue组件中，你可以这样使用flv.js来播放多个视频流：

<template>
  <div>
    <div v-for="stream in streams" :key="stream.id">
      <video ref="video" :id="'video-' + stream.id" controls></video>
    </div>
  </div>
</template>
 
<script>
import flvjs from 'flv.js';
 
export default {
  data() {
    return {
      streams: [
        { id: 1, url: 'your_stream1_url' },
        { id: 2, url: 'your_stream2_url' },
        // ... 更多视频流
      ],
    };
  },
  mounted() {
    this.streams.forEach((stream) => {
      this.playStream(stream.id, stream.url);
    });
  },
  methods: {
    playStream(id, url) {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById(`video-${id}`);
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: url,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
  },
};
</script>

在这个例子中，我们定义了一个streams数组来存储多个视频流的信息，包括流的ID和流的URL。在组件被挂载后，我们遍历这个数组，为每个流创建一个flv.js播放器，将视频元素绑定到对应的<video>标签上，加载并播放流。

确保你的视频流URL是可访问的，并且你已经处理好了跨域问题（如果需要的话）。这个例子假设flv.js是支持当前环境的，并且你已经正确地引入了flv.js库。