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(){});

猜你喜欢

转载自blog.csdn.net/kingdomwar/article/details/80430486
今日推荐