zoukankan      html  css  js  c++  java
  • 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. 使用图片和视差模拟简单视频。
  • 相关阅读:
    Linux中./configure、make、make install详解
    VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置
    VMWare中Linux虚拟机设置静态IP上网的设置方法
    Linux下SSH远程连接断开后让程序继续运行解决办法
    弱网测试(一)
    算法的测试
    前端图片加载优化
    jpg/jpeg/png格式的区别与应用场景
    测试分类标准
    Mysql 日期与时间戳的相互转化
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9478842.html
Copyright © 2011-2022 走看看