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"属性能解决没有动画的问题。测试确实可以,但还是有坑,故不采用。