flv.js延迟解决方案

1,863 阅读1分钟

只需设置开启清除视频缓存方法即可(下方案例为30s清理一次,可按照个人需求设置)。componentDidMount()、jumpToEndBuffer()为主要方法,可以直接拿来复用。

mounted(){
    var video = document.getElementById('videoElement')
    this.player = flvjs.createPlayer({
        type: 'flv',
        url: this.videoUrl,
        enableWorker: true,
        enableStashBuffer: false,
        autoCleanupSourceBuffer:true,
        autoCleanupMaxBackwardDuration:60,
        stashInitialSize: 128,
        isLive: true
    })
    this.player.attachMediaElement(video)
    this.player.load();

    //开启清除视频缓存 30秒一清
    this.componentDidMount();
  },
  methods: {
    destoryVideo(){
      if(this.player){
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
    },
    componentDidMount() {
        this.cleanBuff = setInterval(this.jumpToEndBuffer, 3 * 10 * 1000)
    },
    jumpToEndBuffer (){
        if (this.player) {
            let buffered = this.player.buffered
            if (buffered.length > 0) {
                let end = buffered.end(0)
                if (end - this.player.currentTime > 0.15) {
                    this.player.currentTime = end - 0.1
                }
            }
        }
    },
  },
  destroyed() {
    if (this.cleanBuff !== null) {
      //清除定时器
      clearInterval(this.cleanBuff)
    }
  },