全网最详细！vue中使用flv.js 播放直播监控视频流

老规矩，先安装flv.js 插件
npm install flv.js
在组件中的使用
**注意事项 放后面我怕你们不看呐！！！！
1.必须在dom加载完成后再执行直播视频流的填充方法！
2.在一个网页中最多同时容纳6个监控视频播放！第七个绝对加载不出来！
3.在离开这个页面的时候必须销毁播放容器，不然会占用TCP个数，导致其他页面的监控也播放不了
**

import flvjs from "flv.js";
//页面代码
<template>
  <div class="tunnelvideo" v-loading="loading">
    <video
      class="videosmall"
      ref="videosmallone"
      preload="auto"
      muted
      autoplay
      type="rtmp/flv"
    >
      <source src="" />
    </video>
  </div>
</template>
//1.必须要声明一个播放器的容器  player就是播放器的容器
data() {
    return {
      player: null,
    };
  },
//2.在方法中
init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
      setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
        var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
        if (flvjs.isSupported()) {
        //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
          if (this.player !== null) {
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
          }
          this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
            {
              type: "flv",
              url: val, //你的url地址
              isLive: true, //数据源是否为直播流
              hasAudio: false, //数据源是否包含有音频
              hasVideo: true, //数据源是否包含有视频
              enableStashBuffer: true, //是否启用缓存区
            },
            {
              enableWorker: false, //不启用分离线程
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              autoCleanupSourceBuffer: true, //自动清除缓存
              lazyLoad: false,
            }
          );
          this.player.attachMediaElement(videoElement); //放到dom中去
          this.player.load();//准备完成
          //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
          this.player.play();//播放
        }
      }, 1000);
    },
//3.在销毁的声明周期中  必须要销毁掉播放器的容器！！！！血的教训
beforeUnmount() {
    if(this.player){
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    }
  },