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"
属性能解决没有动画的问题。测试确实可以,但还是有坑,故不采用。
习惯没养成哈哈哈
技术文留言就少了
主要是够冷门
反正我是第一次听说 哈哈 我是孤陋寡闻 知道的少
我以前尝试用过否则也不知道,当时太菜有文档都没折腾明白