那些年video遇到的坑

Coly 发布于2019-08-05 10:33 / 1994人阅读

摘要：做开发的童鞋应该都遇到过低版本安卓以下安卓微信上播放视频之后就会有一堆广告呈现在你面前。但是严重影响了视频的体验感。这完美地将安卓微信播放器的广告屏蔽掉了。

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

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

云服务器混合云语言的坑爹设计阿里云服务器的坑云服务器踩过的坑遇到过

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55875.html

那些年video遇到的坑

摘要：做开发的童鞋应该都遇到过低版本安卓以下安卓微信上播放视频之后就会有一堆广告呈现在你面前。但是严重影响了视频的体验感。这完美地将安卓微信播放器的广告屏蔽掉了。做H5开发的童鞋应该都遇到过低版本（安卓6.0以下）安卓微信上播放video视频之后就会有一堆广告呈现在你面前。每次瞪着腾讯自己出来的H5产品，五花八门的视频！重点是还解除了广告的限制。简直是恨！！！！这么专制真的好吗？哈哈，泄...

joyqi 2019-08-21 11:16 评论0 收藏0
腾讯优测-优社区干货精选 | 那些年，我们在Android机型适配上遇到的坑之Camera拍照时快

文/腾讯优测研发工程师吴宇焕优测小优有话说： android机型适配的坑自然是不少，不想掉坑快来优测优社区~ 现在Android手机一般都会带有照相功能，有很多朋友就发现手机照相时快门声音很响，想关又关不掉。。。。。不过话说回来，静音拍照你想做啥？来到主题上，因为网络上有很多关于删除或修改快门声音文件是关闭快门声的方法的内容，所以我就不赘述了。今天我想和大家说的是：在开发中，针对camera...

tain335 2019-06-24 19:36 评论0 收藏0
微信小程序开发中遇到的坑和解决办法

摘要：和部分组件表现的差异微信最小化后正在播放的会暂停，需要再次点击播放按钮，如果视频设置的是不可控，没有开始播放按钮，视频暂停了就无法继续播放了，没有该问题。 1、原生组件的层级问题 video、canvas、camera等原生组件层级最高，其他组件无论z-index为多少，都无法覆盖在原生组件上。这里拿video组件做示例，如果需要点击视频支持微信开放能力，例如授权手机号，获取用户信息...

princekin 2019-08-23 12:39 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

_Zhao 2019-06-21 16:15 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

liuchengxu 2019-07-16 16:03 评论0 收藏0