介绍

手头上正好有个项目，需要做一个微信端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无法自动播放的问题。这个解决方案也是查了很多案例，最后在腾讯的一个吃鸡宣传视频发现的，地址也贴出来给大家参考参考：
https://game.weixin.qq.com/cgi-bin/h5/kvpage/old/pandora/tusvbh3njk.html

预加载

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

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

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

    video.buffered.length

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

总结

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