【微信 video】微信 video 踩坑记录

前提介绍：

iOS中微信的浏览器内核应该是和Safari浏览器同样的内核

Android中微信的浏览器内核是腾讯自己开发的X5腾讯浏览服务（Android上的QQ浏览器也是这个内核）

1 内联播放视频

iOS上给video标签增加playsinline和webkit-playsinline（兼容新版旧版），对于在Safari中可以内联播放的，那么在微信中也是内联播放的

Android上给video标签增加playsinline和webkit-playsinline（兼容新版旧版），只有部分机型支持（已知Sumsung Note4（Android 6.0.1）可以，Vivo X9（Android 7.1.1）不可以，其它手机和版本没有测试）

Android上给video标签增加x5-video-player-type="h5"属性，可以做到类似内联播放的样式，但顶部的微信的title会ui有变化

2 根据视频的宽高，取视频中间一块正方形播放，其余用外面盒子设定宽高布局的方式overflow: hidden，对视频多余部分进行遮罩，并视频内联播放

iOS，用1的方法做内联播放，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素上即可

Android

2.1 使用playsinline和webkit-playsinline做内联，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素，对于可以内联播放的Android机器，多余的部分将会溢出显示，并不会这罩住（QQ浏览器同理也是这样，但是Chrome浏览器Android版就可以，说明那个X5内核有点坑爹）

2.2 使用给video标签增加x5-video-player-type="h5"属性，做到类似内联播放的样式，然后宽高以及video相对外面盒子的定位等参数通过计算获得设置在对应的元素，虽然是内联的样式播放，但是原来属于视频的但被遮罩的部分，将会变成黑色的底（即ui也不好看，不推荐）

2.3 既然2.1和2.2两种方法都不适合，所以建议需要进行遮罩裁剪内联播放的视频，在Android的微信上还是放弃吧，建议做成，点击播放按钮时，弹出一个全屏播放的浮层（自己布局一下fixed的盒子，里面放video标签，记得此标签不要写内联的任何样式playsinline和webkit-playsinline和x5-video-相关的属性）

3 内联播放视频的时候，播放、暂停、进度条的ui自己定制

iOS上，使用1的方法，加上自己写ui，js调用play，pause控制播放暂停，监听ondurationchange和ontimeupdate可以获取总时长和当前播放的时间，计算出播放进度

Android上，微信中的播放器样式是没法自己定制的（chrome就可以，但是X5的腾讯浏览服务就是不让），官方的说法是这是产品策略（在微信或手Q上，如果是qq.com域名下的video可以通过不指定control属性（表明由页面自己绘制控制面板）来控制）（产品经理都是一样讨打么）

参考资料：

H5同层播放器接入规范

https://x5.tencent.com/tbs/technical.html#/detail/web/1/cecfc00a-f9d1-448f-b04d-8acdf571e469

https://x5.tencent.com/tbs/technical.html#/detail/web/1/e41b0474-8411-44be-a337-edb776271b53

更多相关文章

随机推荐