带你跳出H5 video的坑

做H5开发的童鞋应该都遇到过低版本（安卓6.0以下）安卓微信上播放video视频之后就会有一堆广告呈现在你面前。


每次瞪着腾讯自己出来的H5产品，五花八门的视频！重点是还解除了广告的限制。简直是恨！！！！这么专制真的好吗？哈哈，泄愤。


参考了很多视频类型的H5代码，比较牛的是把mp4按帧数转成jpg图片，然后通过createjs将帧图片的播放来达到视频的效果！





就像上图一样，每一个视频转出来都是上千张图片，即使每一张只有几K的大小，但是如果需求较大（比如需要播放三四个视频），全部图片加起来就会有几十M。
这对于一个H5来说是不能忍的！这也是小编我入坑的地方。
天真的我应客户要求升级了宽带，现在就想拿一块板砖敲死自己啊！


在客户一而再，再而三地强调加载速度情况下，我试图将图片分开加载，尽管这对于首页加载是有利的。
但是严重影响了视频的体验感。而且经常出现音面对不上的情况，这把客户激怒了，也把小编逼疯了（视频不能少，还要顺畅）。发火


就在这时……
在这个夜黑风高，凌晨半夜的时间
你以为会有什么事情发生吗？No~~~并没有美女大哭
因为这个需求的特殊性，偶然让我发现了‘新大陆’。
我发现微信视频和音频是同一个播放器的！而且可以用音频去顶掉视频！
这……这……发现这个的时候我是跳起来的


就顺着这个思路，我去下载了一段什么空白的mp3——时间最好比1S稍微长一点，小编发现1S的音频太短，视频播放器并不会自动退出。

然后video在ended和pause状态时，就将音频play。这完美地将安卓微信播放器的广告屏蔽掉了。并自动跳到你想要的页！

    $('#video').on('ended pause', function () {                                                                                                                   
           $('#music').play();                                                            //空白mp3；                                                                
    });                                                                                                                                                                                                                                                                                                                            
         
小编亲测！


不过安卓6.0以上这个标签已经非常类似IOS了！所以6.0以上表现出来的画面是跟苹果一样的！
通过上面的处理方式，在视频不用加载的情况下，整个H5的大小瞬间变成不到3M，相对于原来处理方式的22M，有坐上了火箭去旅行的感觉。客户体验瞬间爆炸，连忙称赞！


有问题可以留言咨询哦！么么哒~~~羡慕