关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题

最近在一个H5项目中,碰到了传说中的video标签在安卓版微信浏览器内被强制全屏播放问题。原计划在视频播放完毕后,页面发生video的ended事件时,应该显示分享和进入转化页的按钮,如图:
video结束后显示分享和进入转化页的按钮

然而在很多安卓手机微信内,视频播放结束后并没有出现应出现的按钮,而是出现了一堆QQ平台的视频推荐:
安卓手机微信内出现了一堆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事件发生时强制页面跳转到另一个结果页,用这种迂回的方式勉强交了答卷。虽然牺牲了一点用户体验,但好歹保留了转化…

最后,奉上一条知乎上对此问题讨论的比较多的帖子,7楼道破了天机:https://www.zhihu.com/question/36423771?sort=created


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

16-12-26更新
几个月过去了,看来腾讯是没打算解决这个问题,而是利用这个去揽财了。X5论坛相关问题帖子无数,但客服已经懒得搭理;原先说好的九月版本更新也是拖到10月,11月,然后就干脆不提了
伙伴们死了这条心吧!白名单之外,现在想入行搞H5微信端视频开发应用的各位,只能怪你们生不逢时,入行太晚了……

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1399.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

6 关于 “关于HTML5 video标签在安卓版微信浏览器内被强制全屏播放的问题” 的评论

  1. 闫燕燕

    想问一下这个问题解决了吗?我看各大直播平台分享在微信中的web页面,打开视频是自定义的样式,不是视频在顶层,比如:映客直播视频分享,火山小视频等直播分享页面,它们怎么实现的?

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注