最近在一个H5项目中，碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题。原计划在视频播放完毕后，页面发生video的ended事件时，应该显示分享和进入转化页的按钮，如图：
然而在很多安卓手机微信内，视频播放结束后并没有出现应出现的按钮，而是出现了一堆QQ平台的视频推荐：
之所以会出现视频推荐，是因为video被强制全屏播放，而且播放完毕后仍然保持全屏。经过测试video的ended事件发生后相关的JS程序还是正常的执行了，但页面表现的所有内容都被这个可恶的全屏video层遮盖了。
经过各种尝试，在iOS下，我们可以给video添加webkit-playsinline属性，使视频在页面上原本位置播放，但这个属性在安卓上无效。另外我还做了不少其他尝试，在此列出，本文读者看后可以少走弯路，不必轻信网上各种不靠谱的解决方案
1. 确认webkit-playsinline在安卓上无效，但此属性在iOS上兼容不错，建议保留
2. 尝试用canvas的drawImage命令把整个视频放入canvas上，无奈实在太卡，而且声音也不好控制
3. 既然video的ended事件正常执行，尝试了在ended事件把整个video删除，或者增加其他元素的z-index。然而都无效，这个全屏层显然是系统级的，不再只页面上的一个元素，各种页面层DOM操作都对他产生不了任何影响。
4. 有说在腾讯自己的服务器上放视频不会有此问题。我尝试把视频上传到腾讯视频平台，视频被打上了腾讯视频的水印我忍了，但还是发现最新版本的腾讯视频平台已经关闭了视频源文件地址，只给了一个swf地址，无法在手机浏览器直接播放。通过各种手段勉强获取到了一部分真实视频地址，但发现获取到的视频只有15秒，无法使用。看来腾讯已经把这条路堵死了。
奇怪的是，在以前看到过的一个腾讯的案例中，他们页面上的video并没有出现全屏状况，而是乖乖的留在了页面上。在搜索了知乎和腾讯浏览器论坛后，我才知道，原来由于现在微信内置浏览器采用腾讯X5内核，而这个坑爹的X5对web标准有很多刻意为之的不遵循，video强制全屏就是其一。X5内核以增强用户体验为名，给video套上了自己的UI并强制全屏，这个全屏不接受DOM层面的任何约束，视频播放完毕后还会出现QQ自己的视频推荐，这就给很多video应用开发者套上了枷锁，我们的项目也成了受害者。
在腾讯论坛中有一篇公告，显示腾讯承认X5内核对播放器做了覆盖
并且曾开放过白名单，加入白名单的域名可以不受此影响（包括腾讯集团的各个网站）。但如今白名单已经关闭申请，我们唯有寄希望与在微信后续更新中，能把这个恼人的劫持行为去掉。
此问题至今尚未在技术层面上解决。最后我们在安卓手机上，在ended事件发生时强制页面跳转到另一个结果页，用这种迂回的方式勉强交了答卷。虽然牺牲了一点用户体验，但好歹保留了转化…
最后，奉上一条知乎上对此问题讨论的比较多的帖子，7楼道破了天机：https://www.zhihu.com/question/36423771?sort=created
最后的解决办法是下面的答案：
<video src="" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto"></video>
这样写就可以了 安卓微信 ios下通用 测试ok的请把我顶上去 避免大家浪费时间链接：https://www.zhihu.com/question/36423771/answer/227144257
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- 还没有人评论，欢迎说说您的想法！
客服
