天天看点

video.js rtmp/hls 直播流状态监听

网络上 videojs 的用法有很多,但是没有搜到直播时网络异常的状态函数。

通过对 video.js 官网的第一个例子打开控制台查看dom节点状态变化,找到如下几个函数名称,可以对状态进行监听并显示自己想要的样式。

...
    setUrl() {
      let that = this
      if (this.player) {
        this.player.dispose()
      }
      this.$refs.video.innerHTML = `<video id="player" class="video-js" preload="auto" width="750px" height="350px" controls></video>`
      this.player = videojs('player', this.option, function () {
        this.on('play', function () {
        // 播放器准备完毕
          console.log('play')
          that.play()
        })
        this.on('pause', function () {
        // 播放暂停(点击暂停按钮或调用暂停方法)
          console.log('pause')
        })
        this.on('waiting', function () {
        // 播放过程中由于网络或其他原因产生的等待,此时视频播放暂停,等网络恢复后会自动执行【playing】自动播放
          console.log('waiting')
          that.pause()
        })
        this.on('playing', function () {
        // 每次画面开始播放或是恢复播放都会执行
          console.log('≈')
          that.playing()
        })
      })
      this.player.src(this.getSrc())
      this.player.load()
    }
           

继续阅读