Html5开发 微信视频及夸克手机浏览器问题

1、video标签在更换src之后,需要执行load()方法,载入新视频。

this.video.src = src;
this.video.load();

2、在微信内置浏览器中,这段时间就会在video标签中显示上一个视频的最后一帧的画面所以需要在前一个视频播放完毕后隐藏video标签,再在切换src之后监听video.oncanplay,在触发该事件之后,再将相应的video标签显示出来,这样,就不会出现上一个视频的残留帧。

this.video.src = src;
this.video.load();
this.video.oncanplay = function(){
     _this.video.parentNode.style.display = "block";
     _this.video.width = GAME.stageWidth/2;
     _this.video.height = GAME.stageHeight/2;
     _this.video.play();
}

3、背景音乐自动播放会被浏览器阻止,所以需要默认显示为静音状态,再由用户交互触发播放。并且音频的play()方法会返回一个promise对象,如果需要监听是否播放成功,可以按如下进行操作。

GAME.bgsound.play().then(
    function(resolve){
       GAME.bgsoundplaying = true;
    },
    function(reject){
        GAME.bgsoudplaying = false;
    }
);

4、在某些手机浏览器,如夸克浏览器,监听video播放结束事件会出现问题

video.onended = function(){};
video.addEventListener("ended",function(){});

可以用以上方法,解决某些手机浏览器的视频播放结束监听问题

或者可以直接使用jQuery的on("ended",function(){});

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值