flv.js报错 的解决方案

flv.js加载视频墙切换时报错如下

分析原因：
切换显示时报错例如：从图1切换到图2时，前四个视频流已经加载过一次，切换时，视频资源会二次加载

图1

图2
解决方案：
如下

export default {
  data () {
    return {
        videoshow:4,//屏幕可显示的视频数量（1，4，6，9）
        
        videoElementId:[],  //video标签的id集合
        videoClass:'video1',//分屏显示的video的样式
        videoUrlShow:[],//显示在页面中的视频流的url
        flvPlayer:[],//视频的flvPlayer对象的集合
        videoUrl:[//后台请求的视频流的url
            'ws://192.168.1.88/live/cam00001.flv',
            'ws://192.168.1.88/live/cam00002.flv',
            'ws://192.168.1.88/live/cam00004.flv',
            'ws://192.168.1.88/live/cam00003.flv',
            'ws://192.168.1.88/live/cam00001.flv'
        ],
    }
  },
  mounted(){
    let _this=this;
    if(_this.videoUrl.length>0){//默认只显示第一个视频
        _this.videoUrlShow[0]=_this.videoUrl[0];
    }
    setTimeout(() => {
        for(let i=0;i<_this.videoUrlShow.length;i++){
            _this.videoElementId[i]=document.querySelector("#videoElement"+i)
            for(let i=0;i<_this.videoUrlShow.length;i++){
                _this.videoElementId[i]=document.querySelector("#videoElement"+i)
            }
        }
        _this.isplaysd();
    },100)
  },
  methods:{
    qhmenu(indexd){
        let _this=this;
        _this.videoUrlShow=[]//清空显示出来的的视频流路径
        _this.videoshow=indexd;
        _this.videoClass= 'video'+indexd;//视频样式的class名称
       if(indexd==1){//确定显示出来的的视频流路径
          if(_this.videoUrl.length>0){
            _this.videoUrlShow[0]=_this.videoUrl[0];
          }
       }else if(indexd==4){
          if(_this.videoUrl.length>0 && _this.videoUrl.length<4 ){
            for(let i=0;i<_this.videoUrl.length;i++){
            _this.videoUrlShow[i]=_this.videoUrl[i];
            }
          }else if(_this.videoUrl.length>0 && _this.videoUrl.length>4 ){
            for(let i=0;i<4;i++){
                _this.videoUrlShow[i]=_this.videoUrl[i];
            }
          }
       }else if(indexd==6){
          if(_this.videoUrl.length>0 && _this.videoUrl.length<6 ){
              for(let i=0;i<_this.videoUrl.length;i++){
                _this.videoUrlShow[i]=_this.videoUrl[i];
              }
          }else if(_this.videoUrl.length>0 && _this.videoUrl.length>6 ){
            for(let i=0;i<6;i++){
                _this.videoUrlShow[i]=_this.videoUrl[i];
            }
          }
       }else if(indexd==9){
          if(_this.videoUrl.length>0 && _this.videoUrl.length<9 ){
              for(let i=0;i<_this.videoUrl.length;i++){
                _this.videoUrlShow[i]=_this.videoUrl[i];
              }
          }else if(_this.videoUrl.length>0 && _this.videoUrl.length>9 ){
            for(let i=0;i<9;i++){
                _this.videoUrlShow[i]=_this.videoUrl[i];
            }
          }
       }
       for(let i=0;i<_this.flvPlayer.length;i++){//卸载已经加载的视频资源
           _this.flvPlayer[i].unload();
           _this.flvPlayer[i].detachMediaElement();
           _this.flvPlayer[i]=null;
       }
        _this.flvPlayer=[];
        _this.$nextTick(function(){//将视频渲染到页面
            for(let i=0;i<_this.videoUrlShow.length;i++){
                _this.videoElementId[i]=document.querySelector("#videoElement"+i)//视频标签对应的ID
                _this.videoPlay(_this.videoUrlShow[i],_this.videoElementId[i]);//显示视频的方法参数 url 和html对象
            } 
        })
    },
    isplaysd(){
        let _this=this
        if (flvjs.isSupported()) {
            setTimeout(() => {
                for(let i=0;i<_this.videoUrlShow.length;i++){
                    _this.videoPlay(_this.videoUrlShow[i],_this.videoElementId[i]);
                }
                
            },1000)
            
        }
    },
    videoPlay(url,ele){
        let _this=this;
        var videoElement = ele;
       // console.log(ele,"121212121");
        
        let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive:true,
            url: url
        });

        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        setTimeout(function(){
            flvPlayer.play();
        },200)
       
        flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () => {
            // console.log('--== meta data arrived ==--');
        });
        flvPlayer.on(flvjs.Events.MEDIA_SOURCE_ENDED, () => {
            // console.log('--== media source ended, normally means server stop push stream ==--');
        });
        flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE, () => {
            // console.log('--== media source close, show no source view ==--');
        });
        _this.flvPlayer.push(flvPlayer)
        setInterval(() => { // 定时追帧
            if(!videoElement.buffered || !videoElement.buffered.length)
                return 
            const end = videoElement.buffered.end(0)
            const current = videoElement.currentTime
            const diff = end - current
            if (diff<0)
                return 
            const diffCritical = 3 // 这里设定了超过2秒以上就进行跳转
            const diffSpeedUp = 1 // 这里设置了超过1秒以上则进行视频加速播放
            const maxPlaybackRate = 2 // 自定义设置允许的最大播放速度
            let playbackRate = 1.0 // 播放速度
            if (diff > diffCritical) {
                videoElement.currentTime = end - 0.45
                playbackRate = Math.max(1, Math.min(diffCritical, 16))
            } else if (diff > diffSpeedUp) {
                playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
            }
            videoElement.playbackRate = playbackRate
            //if (videoElement.paused) _this.flvPlayer.play()
            
        }, 1000)
    }
  },
 
  destroyed(){//离开组件销毁视频流
      console.log('xiaohui121')
      let _this=this;
      for(let i=0;i<_this.flvPlayer.length;i++){//卸载已经加载的视频资源
			_this.flvPlayer[i].pause();
            _this.flvPlayer[i].unload();
            _this.flvPlayer[i].detachMediaElement();
            _this.flvPlayer[i].destroy();
            _this.flvPlayer[i]=null;
       }
      
  }
  
}