H5内联视频总结

概述

之前写过h5内联视频，总结了一下当时做微信视频类h5的心得，随着工作中越来越多的接触h5，我有了更多的心得与经验，记下来供以后开发时参考，相信对其他人也有用。

内联视频的播放

内联视频需要用户主动触发才能播放，最常见的是在loading界面之后会有一个按钮来触发内联视频播放。（网上说的WeixinJSBridgeReady试过了并不管用，因为这个是旧的jssdk，又查到可以用wx.ready()方法，没有试过。）

白名单机制

微信有一个白名单机制，（付费）加入白名单的域名能够享有这个特权：安卓端的内联视频不需用X5浏览器渲染就能自动内联，而且和ios端一模一样。

所以加入白名单的域名下的h5中的内联视频需要删去下面2条属性：

x5-video-player-type="h5" x5-video-player-fullscreen="true"

另外，XXX.qq.com即qq域名自动无条件加入白名单。

内联与全屏

虽然说是内联视频，但是在安卓X5浏览器中播放的时候会自动全屏！但是在ios浏览器中播放的时候不是全屏（会有顶条）。如何去除顶条？方法是在ios浏览器中启用全屏，即去掉playsinline属性使内联视频变成全屏视频（缺点是会有视频控制条）。

另外，由于在安卓X5浏览器中播放的时候会自动全屏（加入白名单的域名除外），所以一般H5中的内联视频都是全屏并不是“内联”的，然后在全屏视频上覆盖一层html元素即可。

多个内联视频

在安卓端X5浏览器中，不支持多个内联形式的video标签，一旦有一个内联形式的video标签，其它内联形式的video标签会自动变成非内联，甚至会把第一个video标签变成非内联。

内联与音频

在安卓端X5浏览器中，如果在播放内联视频的同时播放音频，会自动停止内联视频！！！

总结

视频类H5在安卓端坑太多，使用的时候需谨慎，目前想到如下解决方法：

1. 付费进入白名单。
2. 使用canvas。
3. 使用图片和视差模拟简单视频。