原生标签是目前最可控、跨端兼容性最好且不牺牲功能的解法，仅适用于h5和app端（非nvue页面），小程序不支持；cover-view功能受限，仅适合简单覆盖；subnvue仅限app端且维护成本高。
直接用原生 <video></video> 标签替换 uni-app 的 <video></video> 组件，是目前最可控、跨端兼容性最好、且不牺牲功能的解法。其他方案（如 cover-view、subNVue）要么平台受限，要么开发成本高、维护难。
为什么原生 <video></video> 能绕过层级问题
uni-app 的内置 <video></video> 在 App 和小程序端会被编译为原生播放器视图（如 iOS 的 AVPlayerLayer），它和 WebView 不在同一个渲染上下文里，z-index 完全失效。而你手动写的 <video></video> 是标准 HTML5 元素，走的是 WebView 的 DOM 渲染管线——它的层级完全服从 CSS 规则。
注意：这个方案只在 H5 和 App 端（使用 webview 渲染模式，即非 nvue 页面）有效；微信/支付宝等小程序**不支持**直接操作原生 <video></video>，它们会静默降级或报错。
实操建议：
- 仅在
platform === 'h5' || (platform === 'app-plus' && !isNVue)时启用原生<video></video> - 用
ref获取 DOM 元素，不要依赖uni.createVideoContext - 播放控制全部走原生 API：
play()、pause()、currentTime、playbackRate、volume等 - 监听事件用
addEventListener('timeupdate', ...)，而非@timeupdate（后者在原生标签上不触发）
cover-view 在小程序里能用，但别指望它干复杂活
cover-view 是微信/支付宝等小程序官方提供的“伪覆盖层”，专为盖在 <video></video>、<map></map> 上设计。但它不是真实 DOM，不支持 flex 布局、不支持大多数 CSS 属性（比如 transform、filter、background-image），事件也只支持 bindtap 等有限几个。
常见错误现象：
- 写了个
cover-view里面嵌cover-image再套文字，结果文字不显示——因为cover-view里只允许子节点为cover-image或另一个cover-view，不能放text - 用
position: absolute定位失败——cover-view只支持top/left/right/bottom四个属性，且单位必须是 px 或 rpx，不支持百分比 - 想给覆盖层加圆角阴影？不行。想做动画过渡？基本不可行
适用场景仅限：简单按钮、单行提示文字、静态图标。一旦交互逻辑变重（比如弹幕滚动、答题浮层），立刻力不从心。
subNVue 可以，但只适用于 App 端，且要小心销毁
subNVue 是 uni-app 提供的原生子窗体，它和视频组件同属原生渲染层，因此天然能覆盖。但它只在 App 端生效（iOS/Android），H5 和所有小程序都不支持。
关键注意事项：
- 每个
subNVue实例必须显式调用uni.hideSubNVue销毁，否则它会一直驻留在内存里，导致多次打开页面后叠加多个子窗体 - 不能在
v-if或swiper切换中动态创建/销毁——subNVue生命周期与 Vue 不同步，容易出现白屏、错位、点击无响应 - 样式调试困难：
nvue的 CSS 支持度低于 Vue，比如不支持calc()、部分伪类、grid布局 - 通信靠
uni.$emit/uni.$on，无法直接访问父页面 data，状态同步容易出错
如果你的项目只跑 App，且覆盖层 UI 相对固定（比如右下角悬浮菜单、底部工具栏），subNVue 是个稳定选择；但如果要适配多端，或者覆盖层随业务频繁变化，它会迅速变成技术债中心。
真机调试时最容易忽略的点
很多开发者本地 H5 调试一切正常，一上真机就崩——根本原因常被忽略：
- iOS App 下，如果启用了
webview的硬件加速（默认开启），某些 CSS 层级组合会让原生<video></video>突然“复活”为高优先级图层。临时解法：给 video 父容器加style="transform: translateZ(0)" - Android 各厂商 WebView 版本碎片化严重，部分旧版（如 Android 7.0 的系统 WebView）不支持
playbackRate，需做降级处理：if ('playbackRate' in videoEl) { videoEl.playbackRate = 1.5 } - App 端若开启
nvue渲染，原生<video></video>根本不会渲染出来——必须确认当前页面是基于vue模板，且pages.json中该页面的style.app-plus.render未设为"nvue" - 微信小程序里强行写原生
<video></video>，真机上会静默不渲染，也不报错，只留空白——务必用条件编译包裹：#ifdef MP-WEIXIN内仍用 uni-app<video></video>
