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

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

文章链接

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>

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

相关文章

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

发表评论

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