HTML5视频全屏时字幕不显示，因浏览器原生字幕控制器在全屏下被降级；应禁用track.mode='disabled'，手动监听cue变化并用div渲染，注意z-index、尺寸同步及Chrome 98+需延时设mode='showing'。
video 全屏时 track 字幕不显示的常见原因
HTML5 <video></video> 全屏后字幕消失，不是浏览器 bug，而是字幕层（<track></track>）默认由浏览器原生控件渲染，全屏时部分浏览器（尤其是 Chrome、Edge）会丢弃自定义字幕样式或完全禁用 WebVTT 渲染逻辑。
关键点在于：<track></track> 本身不生成 DOM 节点，它只是数据源；真正渲染字幕的是浏览器内置的字幕轨道控制器 —— 这个控制器在全屏模式下可能被降级或绕过。
常见错误现象包括：track.mode = 'showing' 在非全屏下有效，一进全屏就失效；或字幕样式（如 color、font-size）在全屏时全部丢失。
用 TextTrackCue + div 层手动渲染字幕
绕过原生字幕限制的可靠做法是：禁用原生 <track></track> 渲染，监听 texttrack 的 cues 变化，用 JS 把当前激活的 TextTrackCue 内容写入一个固定定位的 <div> 层，并随视频全屏/退出同步调整该层的层级和尺寸。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>实操建议：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>设置 <code>track.mode = 'disabled'，防止原生渲染干扰
video.textTracks[0].oncuechange 或轮询 activeCues
<div> 必须加 <code>pointer-events: none，否则会拦截视频点击事件video.requestFullscreen() 后立即重设字幕层的 z-index 和 position（比如设为 fixed + inset: 0）Chrome 全屏字幕兼容性陷阱
Chrome 98+ 对 <track></track> 的全屏行为做了收紧：即使设置了 default 属性，全屏后也不会自动启用字幕轨道，必须显式调用 track.mode = 'showing' —— 但这个调用必须发生在全屏状态已生效之后，否则无效。
容易踩的坑：
-
video.addEventListener('fullscreenchange', () => { track.mode = 'showing' })不可靠，因为事件触发时机早于浏览器完成全屏布局 - 正确做法是加
setTimeout(() => { track.mode = 'showing' }, 100)或监听resize事件（全屏会触发） - 若使用
document.fullscreenElement === video判断，注意 Safari 用webkitIsFullScreen，需兼容
字幕层与视频尺寸同步的关键参数
手动渲染字幕时，字幕位置（尤其垂直居中）依赖视频实际渲染尺寸，而全屏后 video.clientWidth/clientHeight 可能未及时更新，导致字幕错位。
必须处理的参数：
- 用
getBoundingClientRect()替代clientWidth获取实时尺寸 - 监听
video的resize事件（需先设置video.setAttribute('playsinline', '')并确保支持） - 字幕
<div> 的 <code>font-size建议用vw或按比例计算（例如fontSize = video.clientHeight * 0.04） - 避免用
transform: scale()缩放字幕层，会导致文字模糊；优先用响应式 CSS 或 JS 动态改style.fontSize
最麻烦的其实是字幕时间轴精度和多轨道切换 —— 这些没做防抖或节流，容易在快进/暂停后出现 cue 错乱。事情说清了就结束
