开发微信H5视频秀项目遇到的坑

4,933 阅读2分钟

介绍

手头上正好有个项目,需要做一个微信端H5视频秀的一个项目,想想好像挺简单的,由两个视频组成,播放完第一个视频后点击按钮继而播放第二个视频。好了,结果微信的坑TM的多

问题排查

自动全屏与播放控件条问题

这个其实不难,把下面的属性都加上就可以实现了,具体解释我也不在这里说了,不懂的就百度下吧

    <video id="video" src="test.mp4"  webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow"  x5-video-orientation="portrait" 
    x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

ios下很完美的播放不会自动全屏,设置好宽高就可以播放了 android下 会使用同层播放,也算是暂时解决吧,这个查遍了国内外的资料也没法实现和ios一样,希望有能解决的小伙伴也告诉我下

自动播放

    var video = $("#video")[0];
    video.play();

本以为这样就可以实现 视频自动播放了,微信的机制限制了不允许自动播放,翻了下资料还好有解决方法

    var video = $("#video")[0];
    document.addEventListener("WeixinJSBridgeReady", function () {  
              video.play();  
    }, false); 
    

是的,微信有自带WeixinJSBridgeReady方法,我们只要监听它就行了,IOS完美解决。 “那个谁,把你安卓手机借来看下”,怎么黑屏....... android下不允许js进行播放视频,必须由用户交互来触发播放

最后的解决方案是这样的: 第一个视频由canvas来画出加载第二个视频的加载状态,等预加载完毕后点击一个按钮或者滑动播放视频,给用户营造一种是交互视频的感觉,解决android无法自动播放的问题。 这个解决方案也是查了很多案例,最后在腾讯的一个吃鸡宣传视频发现的,地址也贴出来给大家参考参考:
game.weixin.qq.com/cgi-bin/h5/…

预加载

在上面提到的预加载还有一个坑,这里使用过的是HTML5原生的api

    video.addEventListener('canplaythrough',function(){
        //预加载完毕
      });

呵呵,想得太简单了,这次是ios出问题了,android很完美的执行了预加载回调,ios好像不认识一样。查了资料发现ios微信浏览器下不会执行这个回调,回调是在播放后才执行(我要你何用)。 又想到一个方案:

    video.buffered.length

获取它的加载长度,发现跟canplaythrough一样,ios下还是没法解决 最后,ios下做了模拟加载完毕,9M的视频 10秒的预加载应该能使它流畅播放下去了。

总结

微信的坑还是得慢慢填,最后的预加载也会再尝试找方案解决,第一篇文章就记录这么多了。