vue整合xgplayer西瓜播放器组件的封装遇到画面卡顿问题需要重新连接

阅读量：

前言

引入画面卡死重连机制的原因在于，经过长时间的测试后发现，系统偶尔会出现画面停滞的情况，并且无法自动恢复正常播放。通过查阅相关技术讨论帖了解到，画面卡顿的主要原因是服务器端的webSocket推流出现短暂中断后又迅速恢复，而播放插件未能及时响应这一变化，导致播放异常。

基于上述分析，我对画面卡死的检测逻辑进行了调整。具体而言，当解码帧数连续10次未发生变化时，系统将判定为画面卡死，并触发实例销毁操作以实现重新连接。

画面卡死重连机制设计

在data定义两个变量：

复制代码

    lastDecodedFrame: 0, //最后一个decodedFrame
    sameCount: 0, //decodedFrame不变次数
    
    
    javascript

在视频设置里做以下处理：

复制代码

    let _this = this;
    //检测画面是否卡死。如果decodedFrames不再发生变化,就销毁掉该实例并进行重新连接。
    this.player.on("statistics_info", function (res) {
      if (_this.lastDecodedFrame == 0) {
    _this.las

全部评论 (0)

还没有任何评论哟~