微信内置浏览器、百度浏览器中 Video标签全屏播放兼容

发布日期：2021-02-06 09:37:02

仿视频通话H5，不兼容问题处理

一、微信手机端

      根据“TBS腾讯浏览器”的文档进行处理，X5视频播放两种形式（x5-playsinline、x5-video-player-type='h5-page'），我们选择第二张形式来控制视频在页面的层级，需注意此处Video标签的CSS样式设置z-index:-1,否则我们自定义的按钮和控制会被遮住。

      另外需要注意，手机端是不允许视频自动播放的，而且只允许click事件触发播放，所以页面需要添加按钮去引导用户去触发点击事件。

二、手机其他浏览器

        调整好微信后，用百度APP打开发现video标签被系统中视频播放器劫持，无法隐藏控制按钮。全屏解决办法（使用的竖版视频，横屏视频没做测试）：给body,html 添加样式 宽高100%，overflow: hidden；内外边距当然也要设置为0。 然后为video标签的父元素添加样式，使用绝对定位,宽度120%（隐藏左右控制按钮）,left:10%， 高度110%（隐藏下部按钮）,top:0px;top最好不要上移，移动多一点接会使视频脱离，启动视频播放窗，然后加上overflow: hidden。  

三、个别IOS版本 微信端不兼容

        引入iphone-inline-video插件

四、关于video.js

        调试过程中查阅资料，有的建议使用video.js、有的建议使用原生、有的直接说videojs不能用的。 亲测可用，建议使用。同时对aspectRatio锁定，以免出现不同视频尺寸引起问题

五、demo

赏