vue flv.js 實現多監控視頻實時播放

安裝  flv.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" + index.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>

以上就是實現的步驟和代碼 有什么問題歡迎大家評論和指出！！！