安卓X5内核（微信/QQ）中video强制提为独立图层，需同时设置x5-playsinline="true"、playsinline、webkit-playsinline；避免父容器使用fixed、transform或flex；百度浏览器要求同域视频并配置x5-video-player-type="h5"；UC及部分安卓浏览器需用canvas绘制或GPU加速绕过层级限制；autoplay+muted+playsinline失效多因调用时机错误或权限未触发。
video在安卓X5内核浏览器（微信/QQ）里脱离文档流
微信和QQ浏览器用的是腾讯X5内核，它会把video强行提成独立图层，无视z-index、position: relative甚至transform。这不是CSS失效，是内核级“劫持”。
- 必须加
x5-playsinline="true"（注意带引号，X5要求值存在） -
playsinline和webkit-playsinline也要写上，三者缺一不可 - 避免把
video放在position: fixed或transform容器里——X5会直接忽略playsinline - 如果父容器用了
flex，给video加align-self: flex-start，防止被居中顶上去
百度手机浏览器强制全屏+层级劫持
百度浏览器对跨域视频特别敏感，检测到src是外链（比如CDN域名），就会自动触发全屏并置顶。它不看你有没有playsinline，先动手再说。
- 把视频文件放到同域下（如
./video.mp4或/static/video.mp4），这是最硬的解法 - 加
x5-video-player-type="h5"，告诉X5内核：“别用原生播放器，走H5流程” - 配合
x5-video-player-fullscreen="false"（注意是false，不是true） - CSS里给
video加position: relative; z-index: 1，再用isolation: isolate包裹父容器，切断渲染隔离
UC浏览器和部分安卓自带浏览器无视z-index
UC和老款安卓原生浏览器根本不读z-index，video永远在最顶层。这时候靠属性没用，得换思路。
- 滚动时动态控制：
window.addEventListener('scroll', () => { video.pause(); video.style.position = 'absolute'; }) - 用
backface-visibility: hidden+transform: translateZ(0)强制GPU渲染，部分机型能抢回层级控制权 - 终极方案：用
canvas逐帧绘制视频画面（需requestVideoFrameCallback或定时drawImage），完全绕过video标签——但只适合非交互型背景视频 - 千万别信“
z-index: -999就能压住”，这些浏览器连负值都当没看见
autoplay + muted + playsinline组合失效的真因
写了autoplay muted playsinline还是跳全屏？大概率不是属性漏了，而是触发时机错了。
立即学习“前端免费学习笔记（深入）”；
- iOS要求
play()必须在用户手势同步上下文中调用，setTimeout、Promise.then、接口回调里调都不行 - 微信iOS版还会检查
document.hasFocus()，页面切到后台再切回来，play()就静默失败 - 某些安卓WebView（如Chrome 90+）首次访问需一次点击才能解锁媒体权限，光靠HTML属性不够，得监听
click后补调play() -
muted="false"或muted="0"完全无效，只有muted（无值）或muted=""才被识别
video的webkitbeginfullscreen和webkitendfullscreen事件监听起来，一旦跳全屏就立刻scrollTo(0, 0)并重置z-index，至少不让用户看到错位。 
