[email protected]播放视频流解决卡顿问题(vue版本)

1.安装flvjs, 参考GitHub - bilibili/flv.js: HTML5 FLV Player

npm install --save flv.js@1.6.2

2.引入flvjs

import flvjs from "flv.js" 

3.创建播放实例

<video id="container" muted autoplay @click="playOrPause('container')"></video>    
<!-- 增加muted属性才能自动播放 -->




  data() {
    return {
      player:'',
      errorTimes:0,
    };
  },
  methods: {
    playOrPause(id){
      let video=document.getElementById(id);
      if(!video){return}
      if (video.paused){
        video.play(); //播放

        //跳帧,赋值当前时间为最后一帧
        let flvPlayer = this.player
        let end = flvPlayer.buffered.end(0) - 1;
        flvPlayer.currentTime = end;
      }else{
        video.pause();//暂停
      }
    },

    createFlvjsPlayer(domId,url){ //创建播放实例,domId是video标签的id名称,url是需要播放的视频流地址
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById(domId);
        const flvPlayer = flvjs.createPlayer({
            type: 'flv',//媒体类型，'flv'或'mp4'
            url: url,
            enableWorker: true,
            // enableStashBuffer: false,
            // stashInitialSize: 128, 
            // cors:true,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        setTimeout(() => {
          // flvPlayer.play();

          flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) =>{ //播放失败重新播放
            console.log(errType, errDetail);
            if(this.errorTimes<3){ //播放失败次数小于3 就重新创建播放实例
              setTimeout(() => {
                this.destroyFlvjsPlayer(flvPlayer)
                this.createFlvjsPlayer(domId,url)
                this.errorTimes++
              }, 1000);
            }else{ //播放失败了
              this.destroyFlvjsPlayer(flvPlayer)
              this.errorTimes=0
            }
          })

          // 解决延时累加
          flvPlayer.on("statistics_info", (res) =>{
            console.log(res);
            let end = flvPlayer.buffered.end(0); //获取当前缓冲区末尾buffered值
            let delta = end - flvPlayer.currentTime; //获取buffered与当前播放位置的差值
            // 跳帧
            if (delta > 10 || delta < 0) { //差值大于10秒或者小于0秒
              flvPlayer.currentTime = flvPlayer.buffered.end(0) - 1;
              return;
            }
            // 追帧
            if (delta > 1) { //差值在1到10秒之间
              videoElement.playbackRate = 1.2;
            } else {
              videoElement.playbackRate = 1;
            }
          })
        }, 100);


        return flvPlayer
      }else{
        console.error('不支持flvjs播放!!!');
      }
    },

    destroyFlvjsPlayer(player){ //播放实例销毁
      if(!player) return
      try { //解决视频流无法播放或者不支持的视频流,后面也会无法销毁播放实例
        player.pause()
        player.unload()
        player.detachMediaElement()
        player.destroy()
        player = null
      } catch (error) {
        console.warn('销毁实例失败,可能是实例没有成功播放视频',error);
      }
    },
  },
  mounted(){ //要先等dom加载完成才能播放
     this.player=this.createFlvjsPlayer('container','https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv')
  }

参考 https://www.cnblogs.com/xiahj/p/flvExtend.html