html5微信视频禁止自动全屏,关于HTML5 video标签在安卓版微信浏览器内被强行全屏播放的问题...

最近在一个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. 有说在腾讯自己的服务器上放视频不会有此难题。我尝试把视频上传到腾讯视频平台，视频被打上了腾讯视频的水印我忍了手机浏览器 video标签，但而是看到最新版本的腾讯视频系统尚未关闭了视频源文件地址，只给了一个swf地址，无法在电脑浏览器直接播放。通过各类形式勉强获得至了一部分真实视频地址，但看到获取到的视频只有15秒，无法使用。看来腾讯已经把这条路堵死了。

奇怪的是，在当时发现过的一个腾讯的实例中，他们页面上的video并没有出现全屏状况，而是乖乖的留在了页面上。在搜索了知乎和腾讯浏览器论坛后，我才明白手机浏览器 video标签，原来因为这次微信内置浏览器采用腾讯X5内核，而这个坑爹的X5对web标准有很多刻意为之的不依照，video强制全屏就是其一。X5内核以提高客户体验为名，给video套上了自己的UI并强行全屏，这个全屏不接受DOM层面的任何约束，视频播放完毕后就会发生QQ自己的视频推荐，这就帮这些video应用开发者套上了枷锁，我们的项目也成了受害者。

在腾讯论坛中有一篇公告，显示腾讯承认X5内核对播放器做了覆盖，见原帖：

并且曾开放过红名单，加入白名单的域名可以不受此影响(包括腾讯集团的各个网站)。但现在白名单已经关闭申请，我们只有寄希望与在微信后续升级中，能把这个恼人的劫持行为去掉。

此难题至今仍未在技术层面上解决。最后我们在安卓手机上，在ended事件出现时强行页面跳转到另一个结果页，用这些迂回的方法勉强交了答卷。虽然牺牲了一点用户体验，但毕竟保留了转化…

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/bofangqi/article-143157-1.html