vue 使用flv.js播放flv监控

安装npm install --save flv.js
html
<template>
<div>
<video id="videoElement" autoplay controls width="300" height="200" ></video>
</div>
</template>


script
<script>
    import flvjs from 'flv.js'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            this.$nextTick(() => {
                this.createVideo()
            })
        },
        methods: {
            createVideo() {
                if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('videoElement');
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'url' //你的url地址
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
                    flvPlayer.play();
                }
            }
        }
    }
</script>
循环多个视频流：
<template>
  <div class="app-container">
     <div  class="video" v-for="(video, idx) in videoList" :key="idx">
        <video
              :id="video.index + '_' + idx"
              class="video-player vjs-custom-skin"
              controls
              autoplay
              muted
              width="300px"
              height="200px"
            ></video>
     </div>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      // 监控视频数据
      videoList: [
        {
          url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
          id: "ssddd",
          type: "flv"
        },
        {
          url:
            "https:sdsddsss",
          id: "aaass",
          type: "flv"
        },
        { url: "sddddd", id: "ddxxuuu", type: "mp4" }
      ],
       players:[]
    };
  },
  mounted() {
        // fil播放
    this.$nextTick(() => {
      this.createVideo();
    });
  },
  methods: {
      createVideo() {
      this.videoList.forEach( (camInfo , idx) => {
        console.log(camInfo.type)
        let videoEle = document.getElementById(`${camInfo.index}_${idx}`);
  　　　　　let player = flvjs.createPlayer({
            type: camInfo.type,
            url: camInfo.url,
            isLive: true //直播流
        });
        player.attachMediaElement(videoEle);
        player.load();
        player.play();
        this.players.push(player);
      })
    },
  },
    //在销毁生命周期内销毁组件

    destroyed () {

      this.players.forEach(player => {

        player.pause();

        player.unload();

        player.detachMediaElement();

        player.destroy();

        player = null;

      })
    }
};
</script>
<style scoped>
.search-Box {
  width: 300px;
  margin: 10px 0;
  float: left;
  margin-right: 20px;
}
</style>
参考1https://www.mk2048.com/blog/blog_hck0bkh1c12jb.html
参考2https://blog.csdn.net/qq_44938782/article/details/110121350

Tags：

转载：转载说明/web/wzjs/69.html

很赞哦！ ()