那些年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,有坐上了火箭去旅行的感觉。客户体验瞬间爆炸,连忙称赞!

有问题可以留言咨询哦!么么哒~~~

猜你喜欢

转载自www.cnblogs.com/baimeishaoxia/p/12913781.html