vue中关于flv.js的心得操作

项目中做实时监控,我选择了b站的flv.js没想到这么坑，本人做的一屏同时展示4个画面
一定要加destroy生命周期

export default {
  data() {
    return {
     //存放视频直播的数组
      list: [],
    }
  },
    methods:{
     	video(){//视频列表接口,将拿到数据放入数组
	      videoList.get().then(res=>{
	        this.list = res.data.slice(0,4)
	        this.list.forEach((item,index)=>{
	          item.player = null
	          item.id = index + 1    
	        })
	      })
	   	 },
	   	 lazyready(){//循环视频数据,动态生成视频
          this.list.forEach((item,index)=>{  
           
          if (flvjs.isSupported()) {

            let videoElement = document.getElementById("video" + item.id);
            if(item.player){
              item.player.pause()
              item.player.unload()
              item.player.detachMediaElement()
              item.player.destroy()
              item.player= null
            }
            item.player = flvjs.createPlayer({
              type: "flv", //=> 媒体类型 flv 或 mp4
              isLive: true, //=> 是否为直播流
              hasAudio: false, //=> 是否开启声音
              stashInitialSize: 128,// 减少首桢显示等待时长
              url: `ws://101.37.149.36:8201/rtsp/${item.id}/?url=${item.url}`
            });
            item.player.attachMediaElement(videoElement); //=> 绑DOM
            item.player.load();
            item.player.play();
            } else {
                alert('不支持播放');
            };
           
        })
   	  },
      beforeDestroy () {
	    this.list.forEach((item)=>{
	      item.player.pause()
	      item.player.unload()
	      item.player.detachMediaElement()
	      item.player.destroy()
	      item.player= null
	    })
  	}
}