欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

网页无插件视频流媒体播放器EasyPlayer.JS切换多清晰度码流播放报错,该如何调试?

程序员文章站 2022-07-07 11:58:54
...

EasyPlayer是一款流媒体播放器系列项目,支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、支持本地文件播放,支持本地抓拍、本地录像、播放旋转、多屏播放、倍数播放等多种功能特性,核心基于ffmpeg,稳定、高效、可靠、可控。

我们将EasyPlayer.JS播放器集成进EasyDSS视频平台,就能够实现EasyDSS的视频流网页无插件直播,并且能够切换不同清晰度的码流进行播放,多方面满足用户的需求。

我们的测试人员发现在EasyDSS播放点播文件,切换多清晰码流时,播放器出现“No compatible source was found for this ”错误显示。

网页无插件视频流媒体播放器EasyPlayer.JS切换多清晰度码流播放报错,该如何调试?

找到控制多清晰码流的代码,打印this.playerUrl 发现this.playerUrl 为空,从以下代码中可以看到实际用到地址为 this.videoURl。

 loadResolutionlist(p) {
   if (this.isresolution) {
      var rlist = this.resolution.split(",");
      var pset = [];
      var newURL;
      var defaultIndex = 0;
      for (var i = 0; i < rlist.length; i++) {
        if (rlist[i] == this.resolutiondefault) {
           defaultIndex = i;
        }
        if (rlist[i] == "yh") {
           newURL = this.playerUrl;
        } else {
    newURL = this.playerUrl.replace(".m3u8", "_" + rlist[i] + ".m3u8");
        }
        pset.push({
           src: newURL,
           type: this.videoType,
           label: this.resolutionName[rlist[i]],
           res: rlist[i]
         });
       }
       p.updateSrc(pset);
    }
 }

我们需要做的就是把this.playerUrl 改为 this.videoURl。

loadResolutionlist(p) {
   if (this.isresolution) {
      var rlist = this.resolution.split(",");
      var pset = [];
      var newURL;
      var defaultIndex = 0;
      for (var i = 0; i < rlist.length; i++) {
        if (rlist[i] == this.resolutiondefault) {
           defaultIndex = i;
        }
        if (rlist[i] == "yh") {
           newURL = this.videoUrl;
        } else {
    newURL = this.videoUrl.replace(".m3u8", "_" + rlist[i] + ".m3u8");
        }
        pset.push({
           src: newURL,
           type: this.videoType,
           label: this.resolutionName[rlist[i]],
           res: rlist[i]
         });
       }
       p.updateSrc(pset);
    }
 }

修改后重启项目,切换多清晰度,显示正常,不再报错。

网页无插件视频流媒体播放器EasyPlayer.JS切换多清晰度码流播放报错,该如何调试?