规避微信內建浏览器中HTML video标签的诡异行为

      ☕ 3 分钟

播放视频时,<video>标签在微信內建浏览器中会默认全屏,脱离文档流悬浮在所有页面元素上方,这往往不是你想要的效果。

作为问题修复的起点,你可以为你的<video>标签添加下列属性:

1
2
3
4
5
6
7
8
9
<!-- 和问题无关的属性从略 -->
<video
    playsinline="true"
    webkit-playsinline="true"
    x5-playsinline="true"
    x5-video-player-type="h5"
    x5-video-orientation="landscape|portrait"
    x5-video-player-fullscreen="true"
></video>

微信內建浏览器用的是哪家的技术?为什么需要加上这些奇怪的属性?

验明真身

大陆安卓版本的微信中,內建浏览器用的是和QQ浏览器同门的腾讯浏览服务(TBS),内核代号X5。

X5内核一开始是苹果主导的webkit内核的fork,后来换成了谷歌主导的blink的fork。X5的卖点是自主、安全、热更新和广告变现。

由于Google Play的限制,大陆以外的安卓微信的內建浏览器基于安卓自带的WebView.

由于苹果的限制,国内外的苹果微信的內建浏览器都基于苹果的Webkit.

有点乱,对吧?

奇怪的属性

x5-playsinline

其实视频开始播放后默认全屏是苹果的主意,这个特性在安卓Webview里并不存在,X5的开发者估计是想让国内安卓用户的体验和苹果同步,在安卓里也实现了这个特性。

苹果允许网页开发者用playsinline属性以及它的供应商前缀版本webkit-playsinline属性来禁用这个行为,X5也提供了它自己的供应商前缀版本x5-playsinline.

playsinline在2016年初成为了HTML标准,不过出于兼容性考虑,它的供应商前缀版本仍然得一并使用。

x5-video-player-type

x5-video-player-type只有一个可选值h5,作用是让X5环境中的<video>标签待在文档流里。

x5-video-orientation

x5-video-orientation声明视频支持的播放方向,可选:

  • portrait:仅竖屏;
  • landscape:仅横屏;
  • landscape|portrait:跟随设备方向。

这个属性依赖x5-video-player-type="h5".

x5-video-player-fullscreen

x5-video-player-fullscreen让视频在开始播放后自动全屏,这个全屏模式不会更改<video>标签在文档流里的位置,不会带来意外。

这个属性影响微信內建浏览器的常驻标题栏,声明后页面会拿到标题栏所占的高度,否则标题栏高度不会给页面,视频全屏播放时页面会有上下两个黑底(平分的标题栏高度)。

值得一提

X5内核不支持同时播放两个(或更多)视频(<video>),也不支持同时播放视频和音频(<video>+<audio>)。如果尝试这么做,新元素开始播放后原先播放的元素会暂停。

安卓和Chrome支持的画中画模式可以在<video>标签中使用disablePictureInPicture属性禁用。

参考资料

其实X5的开发者专门为这个问题提供了文档和例子,不过大家要么是没能找到文档,或者找到文档时早已经受到了“惊喜”。(狗头)


nanmu42
作者
nanmu42
用心构建美好事物。

目录