LoadSystem
MoeOS(2023.3.27)

工匠的骄傲和喜悦
The Pride & Joy of an Artisan
MobileboneJs与音视频播放坑点解决方案
7 条讨论

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

隐私评论
  1. 九日
    九日

    滑稽为什么代码不缩进!!

    2022年10月03日
    1. 泽泽社长
      泽泽社长
      @九日

      习惯没养成哈哈哈呲牙笑

      2022年10月03日
  2. vian
    vian

    技术文留言就少了

    2022年09月30日
    1. 泽泽社长
      泽泽社长
      @vian

      主要是够冷门呲牙笑

      2022年09月30日
      1. 九日
        九日
        @泽泽社长

        加班这几天翻泽泽博客发现好多以前留言过的 真不知道那时候我怎么会看得懂

        2022年10月03日
      2. vian
        vian
        @泽泽社长

        反正我是第一次听说 哈哈 我是孤陋寡闻 知道的少

        2022年09月30日
        1. 泽泽社长
          泽泽社长
          @vian

          我以前尝试用过否则也不知道,当时太菜有文档都没折腾明白菜狗

          2022年09月30日
辽ICP备2022004655号