天天看点

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. 使用图片和视差模拟简单视频。