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

vue + flv.js 实现多视频直播

安装video.js

$ npm install flv.js

页面使用

<template>
  <div class="box">
    <div v-for="(item, index) in list" :key="index">
      <video
        :id="'video' + item.id"
        style="width: 500px; height: 500px"
        controls
        autoplay
        muted
      ></video>
    </div>
  </div>
</template>
<script>
//=> 引入flv.js
import flvjs from "flv.js";
export default {
  deta() {
    return {
      //=> 后台反的视频流
      list: [
        {
          src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
          id: 0,
        },
        {
          src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
          id: 1,
        },
        {
          src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
          id: 2,
        },
      ],
    };
  },
  mounted() {
    this.startPlay();
  },
  methods: {
    //视频浏览
    startPlay() {
      this.list.forEach((item, index) => {
        if (flvjs.isSupported()) {
          let player = null;
          let videoElement = document.getElementById("video" + item.id);
          player = flvjs.createPlayer({
            type: "flv", //=> 媒体类型 flv 或 mp4
            isLive: true, //=> 是否为直播流
            hasAudio: false, //=> 是否开启声音
            url: item.src, //=> 视频流地址
          });
          player.attachMediaElement(videoElement); //=> 绑DOM
          player.load();
          player.play();
        } else {
          console.log("flvjs不支持");
        }
      });
    },
  },
};
</script>

以上就是实现的步骤和代码 有什么问题欢迎大家评论和指出