videojs实现rtmp直播时状态问题

1、直播状态
利用videojs实现rtmp直播时，遇到个问题：需要实时反映当前直播的状态，比如当直播未开始或者已经结束的时候，提示暂无直播；当直播正常播放时，则隐藏提示。

使用play可以监听到直播开始播放的事件，但是error和pause却监听不到直播停止。在video.js的API文档中，找到statechanged事件。

<!--vue-video-player-->
<videoPlayer
      :options="playerOptions"
      ref="video"
      @statechanged="playerStateChanged($event)"
    ></videoPlayer>

/*js部分*/
methods:{
  playerStateChanged($event){
    console.log($event);
  }
}

组件加载后，直播尚未开始推流

开始推流后

暂停推流后

由上图可以知悉，当触发loadeddata时，即开始又直播画面出现，然后timeupdate的值在不停的增加；当直播暂停后，timeupdate的值不再发生改变。我们可以利用这点来判断当前直播是否正常。

 data() {
    return {
      isError: true,  //直播是否异常
      rtmpUpdateTime: 0, //记录直播的更新时间
      videoShow: true
    };
  },
...
methods: {
    //直播状态改变
    playerStateChanged($event) {
      if($event.loadeddata){
        this.isError = false;
      }
      if ($event.timeupdate) {
        if ($event.timeupdate == this.rtmpUpdateTime) {
          this.isError = true; //当时间不再更新的时候，按直播停止处理
          this.reloadVideo();  //重新加载video,达成黑屏效果
        } else {
          this.rtmpUpdateTime = $event.timeupdate;
          // this.isError = false;
        }
      }
    },
    //重新加载video
    reloadVideo() {
      this.videoShow = false; //重新加载video
      this.$nextTick(() => {
        this.videoShow = true;
      });
    }

有一点需要注意，当直播暂停后，虽然可以控制暂无直播的提示信息显示，但是直播最后一帧的画面仍旧在显示，此时需要重新加载下videoPlayer组件。这里通过v-if="videoShow"来控制组件的加载（v-show果然无效）。

<videoPlayer
      :options="playerOptions"
      ref="video"
      v-if="videoShow"
      @statechanged="playerStateChanged($event)"
    ></videoPlayer>

补充：
1、基于对暂停情况的处理
video点击暂停的时候，timeupdate也是不会变的，因此需要判断下当前视频是否处于暂停的状态。

if (!this.$refs.video.player.paused()){
  //未暂停
}

2、网络延迟问题

这个事件的触发频率由系统决定，但是会保证每秒触发4-66次（前提是每次事件处理不会超过250ms）。

网络较差的时候，会出现timeupdate更新不及时的情况，即可能会出现多次timeupdate值保持不变。

...
updateTimeRecord:[],  //记录下相同时间的，当重复出现次数超过一定次数的时候按暂无直播处理
...
if ($event.timeupdate) {
    if (!this.$refs.video.player.paused()) {
        //未暂停
        if ($event.timeupdate == this.rtmpUpdateTime) {
            this.updateTimeRecord.push($event.timeupdate);  //记录下未更新的 timeupdate
            if (this.updateTimeRecord.length >= 50) {  //此处按50处理
                this.isError = true; //当时间不再更新的时候，按直播停止处理
                this.reloadVideo();  //重新加载video,达成黑屏效果
            }
        } else {
            this.updateTimeRecord = [];  //清空记录
            this.rtmpUpdateTime = $event.timeupdate;
            // this.isError = false;
        }
    }
}

以上只是允许在一定程度上的网络延迟，不至于当出现卡顿时就重新加载，导致直播画面一直无法出现的情况。至于如何界定临界值，需要自行做取舍。