强制 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.

有说在腾讯自己的服务器上放视频不会有此问题。我尝试把视频上传到腾讯视频平台，视频被打上了腾讯视频的水印我忍了，但还是发现最新版本的腾讯视频平台已经关闭了视频源文件地址，只给了一个swf地址，无法在手机浏览器直接播放。通过各种手段勉强获取到了一部分真实视频地址，但发现获取到的视频只有15秒，无法使用。看来腾讯已经把这条路堵死了。

奇怪的是，在以前看到过的一个腾讯的案例中，他们页面上的video并没有出现全屏状况，而是乖乖的留在了页面上。在搜索了知乎和腾讯浏览器论坛后，我才知道，原来由于现在微信内置浏览器采用腾讯X5内核，而这个坑爹的X5对web标准有很多刻意为之的不遵循，video强制全屏就是其一。X5内核以增强用户体验为名，给video套上了自己的UI并强制全屏，这个全屏不接受DOM层面的任何约束，视频播放完毕后还会出现QQ自己的视频推荐，这就给很多video应用开发者套上了枷锁，我们的项目也成了受害者。

在腾讯论坛中有一篇公告，显示腾讯承认X5内核对播放器做了覆盖，见原帖：http://bbs.mb.qq.com/thread-1242581-1-1.html

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

此问题至今尚未在技术层面上解决。最后我们在安卓手机上，在ended事件发生时强制页面跳转到另一个结果页，用这种迂回的方式勉强交了答卷。虽然牺牲了一点用户体验，但好歹保留了转化…

16-08-30更新

今天再去看了下腾讯X5论坛，提出此类问题的帖子很多，官方版主已给予答复，在九月版本中会解决问题，期待…

16-12-26更新

几个月过去了，看来腾讯是没打算解决这个问题，而是利用这个去揽财了。X5论坛相关问题帖子无数，但客服已经懒得搭理；原先说好的九月版本更新也是拖到10月，11月，然后就干脆不提了

伙伴们死了这条心吧！白名单之外，现在想入行搞H5微信端视频开发应用的各位，只能怪你们生不逢时，入行太晚了……