规避微信內建浏览器中 HTML<video>标签的诡异行为（默认全屏，脱离文档流悬浮在所有页面元素上方）

[nanmu42]

记录最近遇到的一个问题和解决方案。:)

文章链接

https://nanmu.me/zh-cn/posts/2020/strange-html-video-tag-behavior-in-wechat/

公众号：nanmu42

摘要

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

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

<!-- 和问题无关的属性从略 -->
<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>

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

[mayx]

不是所有微信都用的 x5 内核

[also24]

@mayx #1
其实楼主在完整版的文章中写的还是蛮清楚的，这里发的只是摘要