播放视频时，<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的开发者专门为这个问题提供了文档和例子，不过大家要么是没能找到文档，或者找到文档时早已经受到了“惊喜”。（狗头）

• X5内核调试工具（需要X5内核才能用）
• TBS调试工具
• https://x5.tencent.com/tbs/guide/video.html
• https://docs.qq.com/doc/DTUxGdWZic0RLR29B