MobileboneJs与音视频播放坑点解决方案

MobileboneJs.jpeg

mobilebone是张鑫旭大佬写的页面过场UI框架，最近在折腾它，然后发现个痛点，就是在子页面播放音视频时，返回上一页面，视频或音频还在播放的问题。

问题一

具体情况是这样的，一个player.html通过接受不同参数播放不同视频，然后使用data-reload="anyUniqueId"这个方法来保证同类型页面的唯一性。

当这个子页面播放视频，点击返回上一页时，该页面因为机制原因，只是隐藏掉了，而不是删除掉了，所以还是能听到播放视频的声音。

解决方案

首先给视频播放器加个id，我这里加了player，然后会有两种情况。 情况一：返回按钮为mobilebone提供的返回按钮，这个可以用mobilebone相关api解决，如下：

Mobilebone.callback = function(pageinto, pageout, options) {//回调函数
var video = document.getElementById('player');
if(Mobilebone.isBack(pageinto, pageout)){//判断是否是返回页面
if(video){video.remove();//返回时移出视频播放页面避免视频一直播放}
}
}

情况二：通过点击浏览器的返回按钮来返回页面，这个需要监听浏览器返回事件，如下：

//浏览器返回时移出视频播放页面避免视频一直播放
if(window.history && window.history.pushState){
window.addEventListener('popstate',function(){
var video = document.getElementById('player');
if(video){video.remove();}
});
}

问题二

在player.html页面下，还有个视频列表，点击视频列表就是向player.html传递新的参数来进入页面，但是也有个问题，通过首页进入子页面player.html下在点击视频列表播放视频没有问题，但直接通过网址进入子页面player.html或在player.html页面下直接刷新在点击下方播放列表视频后，这个页面就不会被销毁，导致在后台继续播放的问题。

解决方案

因为之前我们给播放器设置了个player的id，所以出现这种情况，页面就会同时存在两个id，然后经过实验，在回调函数的周期里，识别不到第二个id，所以说只要在回调函数里发现id为player的元素直接删掉即可。代码如下：

Mobilebone.callback = function(pageinto, pageout, options) {
var video = document.getElementById('player');
    //同级页面切换干掉之前页面的播放器
    while(document.querySelectorAll("#player").length>0){
    var video = document.getElementById('player');
    if(video){video.remove();}
    }
}

方案确实解决了问题，但是因为这两个页面属于同级别页面，所以切换的时候没有相关切换动画，所以后来我改成了点击列表直接更改当前播放器播放的视频内容，不过后来看文档感觉data-rel="go"属性能解决没有动画的问题。测试确实可以，但还是有坑，故不采用。

linkCard('.post-content','0');