关于videojs直播暂停的提示

当主播暂停直播时，用户端应有暂停的提示，播放器变为可刷新状态而无需刷新页面。

 

默认的暂停直播会报错：当前媒体不能被载入。

 

网上找了好多都没有相关的解决办法，暂提供以下解决办法：

<video-player
  class="vjs-custom-skin"
  ref="videoPlayer"
  :options="playerOptions"
  @play="onPlayerPlay($event)"
  @pause="onPlayerPause($event)"
  @ended="onPlayerEnded($event)"
  @loadeddata="onPlayerLoadeddata($event)"
  @waiting="onPlayerWaiting($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @ready="playerReadied"
  @statechanged="playerStateChanged($event)"
  @error="onPlayerError($event)"
>
</video-player>

// 直播出错
onPlayerError (player) {
   // console.log('player error!', player)
  clearTimeout(this.timer)
  alert('直播暂停中，请稍后再试')
  this.player.load()			// 重新加载src指定的资源
}，
onPlayerWaiting (player) {
  // console.log('player Waiting!', player)
  this.timer = setTimeout(() => {
    this.player.load()
    this.player.src(this.channel.aHlspullurl)    // 重新设置src（会导致播放器报错，这样就能调用 onPlayerError，并且当直播继续时，刷新播放器即可播放）
  }, 6000)		// 超时
},
onPlayerPlaying(player) {
  // console.log('player Playing!', player)
  clearTimeout(this.timer)
}

别忘了定义 timer

 

这样当直播暂停时，用户端会提示直播暂停，并重新载入播放器，可刷新。当直播继续时，刷新播放器即可。