本文共 3464 字，大约阅读时间需要 11 分钟。

之前和大家讲到EasyPlayer.js的播放器项目已经支持VR播放了，但是在调试过程中，用户反馈，在VR视频流播放过程中，hls直播切换flv直播是可以的，但是flv直播切换到另一个flv直播失效。初步判断是我们自己的项目代码出现bug，排查如下：

  watch:{    VrUrl(newVal, lodVal){      if (lodVal !== newVal) {        this.playerUrl = this.VrUrl        this.initURl()      }    },    initURl() {      if (this.VrUrl !== '') {        this.playerUrl = this.VrUrl        if (this.vr.flvPlayer||this.vr.hlsPlayer) this.isDestroy()        if (this.isHLS) this.playerHLS()        if (this.isMP4) this.playerMP4()        if (this.isFLV) this.playerFLV()        this.callbackFunc()      }    },    isDestroy() {      if (this.vr.hlsPlayer) {        this.vr.hlsPlayer.destroy()        this.vr.hlsPlayer = null      }      if (this.vr.flvPlayer) {        this.vr.flvPlayer.destroy();        this.vr.flvPlayer = null      }    },    playerFLV() {      this.vr.play(this.VrUrl, this.vr.resType.flvVideo, {muted: (this.muted == 'false'|| this.muted == false), autoplay: (this.autoplay == 'false'|| this.autoplay == false) });      this.vr.flvPlayer._config.enableStashBuffer = true;      this.vr.flvPlayer._config.lazyLoad = true      this.vr.flvPlayer._config.lazyLoadMaxDuration = 30      this.vr.flvPlayer._config.lazyLoadRecoverDuration = 2      this.vr.flvPlayer._config.deferLoadAfterSourceOpen = true      this.vr.flvPlayer._config.autoCleanupMaxBackwardDuration = 3 * 60      this.vr.flvPlayer._config.autoCleanupMinBackwardDuration = 2 * 60      this.vr.flvPlayer._config.statisticsInfoReportInterval = 600      this.vr.flvPlayer._config.fixAudioTimestampGap = true         },

总结一下切换流程，就是切换直播地址时，先把之前的hls播放器或flv播放器destroy掉，然后根据新的播放地址，重新初始化一个相应的新播放器。

那么切换失败出现BUG的原因有两个：第一，老播放器destroy失败；第二，老播放器destroy虽然成功了，但是新创建的失效，仍然在使用之前的配置。

我们按照以下步骤来进行分析：

(1)、查找vr定义

_this.vr = new VR(scene, renderer, container, { fov: 100 });

发现vr使用的是开源项目mxreality.js播放库。

(2)、进入mxreality.js播放库源码，在destroy处打印老播放器，发现destroy成功；在新播放器创建处，打印播放地址，发现传入的确实是新地址。那么，问题到底在哪呢？至少到目前为止，可以确认我们的项目代码是没有BUG的，只能怀疑是mxreality有BUG。

(3)、mxreality开源项目本身提供了hls直播切换示例，我们在此基础上，来测试切换flv，发现确实无法切换。与mxreality作者在Github上沟通后，研发建议切换时，不是destroy掉vr.flvPlayer，而是将vr整个destroy掉。经过测试，这样确实能切换成功，但是代价未免太大了，相当于将整个页面刷新掉。进一步与研发反馈，他表示后续有时间会进行优化。目前只能自己解决这个BUG了。

(4)、mxreality源码中播放flv直播部分代码如下

} else if (that.resType.flvVideo == resType) {                    if (!flvjs.isSupported()) {                        console.error('Your browser does not support flvjs')                        return;                    }                    that.flvConfig.url = recUrl;                    that.flvPlayer = flvjs.createPlayer(that.flvConfig);                    that.flvPlayer.attachMediaElement(video);                    that.flvPlayer.load();                    that.flvPlayer.play();

这里的flvPlayer使用的就是flv.js，难道是attachMediaElement(video)这个video没有清理干净导致的？改一下，把video强制初始化一遍，发现BUG依然存在。这下就要怀疑flv.js源码有BUG了。

(5)、进入flv.js源码，使用示例切换两个flv直播地址，发现可以正常切换，并且切换的方式和mxreality源码中是一致的。排查陷入僵局，但是可以肯定，BUG仍然在mxreality当中。

(6)、在mxreality的Github中，浏览了所有的issues看看有没有收获，其中有个网友表示：

我也F12打开控制台，有了意外收获：

(7)、修复bug

that.flvConfig.url = recUrl;                    that.flvPlayer = flvjs.createPlayer(that.flvConfig);                    that.flvPlayer.attachMediaElement(video);                    that.flvPlayer.load();                    that.flvPlayer.play();

经过跟踪，发现that.flvConfig会被flv.js更新，其中就有segments属性，里面有老的flv播放片段。新的播放器只是更改了url，开始播放后，flv.js会优先找segments里的片段继续播放，导致切换失败。解决办法很简单了，在切换flv.js直播地址时，把that.flvConfig重新初始化即可。

转载地址：http://hcjd.baihongyu.com/