HTML5全屏字幕消失解决方法

实操建议：

• 设置 track.mode = 'disabled'，防止原生渲染干扰
• 监听 video.textTracks[0].oncuechange 或轮询 activeCues
• 字幕
  必须加 pointer-events: none，否则会拦截视频点击事件
• 全屏时，用 video.requestFullscreen() 后立即重设字幕层的 z-index 和 position（比如设为 fixed + inset: 0）

Chrome 全屏字幕兼容性陷阱

Chrome 98+ 对 的全屏行为做了收紧：即使设置了 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', '') 并确保支持）
• 字幕
  的 font-size 建议用 vw 或按比例计算（例如 fontSize = video.clientHeight * 0.04）
• 避免用 transform: scale() 缩放字幕层，会导致文字模糊；优先用响应式 CSS 或 JS 动态改 style.fontSize

最麻烦的其实是字幕时间轴精度和多轨道切换 —— 这些没做防抖或节流，容易在快进/暂停后出现 cue 错乱。事情说清了就结束

好了，本文到此结束，带大家了解了《HTML5全屏字幕消失解决方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！