iOS/微信WebView字幕全屏失效的根本原因是未启用内联播放模式，必须同时设置playsinline、webkit-playsinline和muted三属性，并在fullscreenchange事件中手动重置textTracks.mode为"showing"。
video 元素必须启用 playsinline 才能叠加字幕层
直接在全屏 video 上加 track 标签，但 iOS Safari 或微信内嵌 WebView 里字幕常不显示——根本原因是未启用内联播放模式。系统级全屏（如点击原生全屏按钮）会接管渲染层，::cue 样式和自定义字幕 DOM 都会被剥离。
必须同时满足三项：playsinline、webkit-playsinline、muted。缺一不可，否则即使 track 存在，浏览器也不会激活字幕轨道。
-
autoplay可选，但若要静音自动播，三属性仍需齐全 - 不要在
video外层容器加transform或overflow: hidden，否则字幕层可能被裁剪或定位错乱 - 确保
已声明，否则 iOS 下字幕区域可能被状态栏遮挡
track 标签的 src 和 kind 必须匹配 WebVTT 规范
track 不是普通文本插入，它依赖 MIME 类型识别和文件结构。常见错误是用 SRT 文件直接当 src，或 .vtt 文件编码不是 UTF-8 BOM-free。
-
src必须指向可跨域访问的 .vtt 文件（同源或服务端配Access-Control-Allow-Origin） -
kind="subtitles"是唯一兼容沉浸式字幕的值；captions侧重听力障碍辅助，部分浏览器会强制显示背景色，破坏沉浸感 -
srclang必须是标准语言标签（如zh-Hans、en-US），否则video.textTracks[0].mode = "showing"可能无效 - 首行必须是
WEBVTT，且空行后才写字幕块，否则解析失败，textTracks.length为 0
::cue 伪元素样式在全屏下需重置定位与安全区
默认 ::cue 渲染在视频内部，但全屏后视口尺寸突变、安全区偏移（尤其 iPhone 刘海屏），会导致字幕被切掉或贴顶/贴底。
不能只写 bottom: 20px 这类固定值。正确做法是结合 CSS 环境变量和 flex 容器：
video::cue {
position: absolute;
inset: auto 10% env(safe-area-inset-bottom) 10%;
display: flex;
justify-content: center;
align-items: flex-end;
margin: 0;
padding: 8px 16px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 1.2rem;
line-height: 1.4;
text-align: center;
white-space: pre-line;
}
-
inset替代top/bottom/left/right，让字幕始终避开底部安全区 - 避免用
transform: translate()，某些安卓 WebView 会丢失字幕层渲染上下文 - 如果需要多语言切换，别删
track元素，改用textTracks[i].mode = "hidden"/"showing"动态控制
全屏后字幕消失？检查 document.fullscreenElement 是否触发重绘
调用 video.requestFullscreen() 后，部分浏览器（尤其是 Safari 17+）会短暂清空 textTracks 列表或重置 mode。这不是 bug，而是全屏上下文重建导致的轨道状态丢失。
- 监听
fullscreenchange事件，在document.fullscreenElement === video时，手动执行：video.textTracks[0].mode = "showing" - 不要依赖
loadedmetadata事件初始化字幕，它在全屏前就已触发；应等canplaythrough后再设mode - Android Chrome 有时需延迟 50ms 再设
mode，否则无效；可用setTimeout(() => { track.mode = "showing" }, 50)
真正难的不是加 track 标签，而是全屏那一瞬间——浏览器重绘、安全区重算、字幕轨道重绑定，三个动作不同步。你得在 fullscreenchange 里补一手 mode 设置，再用 inset + env() 把字幕钉在可视区域内，否则用户一进全屏，字幕就“掉”到刘海下面去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
