暂停时自动隐藏字幕需监听pause/play事件并设置textTrack.mode为'hidden'/'showing'，因track是空元素不支持CSS样式，其显示状态仅由mode属性控制，且须确保轨道已加载完成（readyState===2）并符合kind要求。
video暂停时自动隐藏track字幕轨道，为什么直接监听pause事件不行
因为track元素本身没有“显示/隐藏”状态，它是否渲染字幕取决于track的kind、srclang、default属性，以及video.textTracks中对应轨道的mode值。暂停（pause）事件本身不会改变mode，所以光监听pause然后设display: none对track标签无效——track是空元素，不参与渲染，也不接受CSS样式。
真正起作用的是textTrack.mode = 'hidden'
字幕轨道是否显示，由其mode属性控制，合法值为'disabled'、'hidden'、'showing'。其中：
-
'showing'：字幕可见（即使视频暂停也显示） -
'hidden'：字幕不可见但保持激活（可响应JS操作，如切换回showing） -
'disabled'：彻底禁用，等效于移除轨道
所以正确做法是监听pause和play事件，手动切换mode：
const video = document.getElementById('myVideo');
const track = video.textTracks[0]; // 假设第一个是字幕轨
video.addEventListener('pause', () => {
if (track && track.mode === 'showing') {
track.mode = 'hidden';
}
});
video.addEventListener('play', () => {
if (track && track.mode === 'hidden') {
track.mode = 'showing';
}
});
常见错误：用CSS试图隐藏track或其伪元素
以下写法全部无效：
-
track { display: none; }——track是void元素，不支持样式 -
video::-webkit-media-text-track-display { display: none; }—— WebKit私有伪元素，仅部分Chrome版本支持，Safari不认，且无法绑定到暂停状态 - 给
加hidden属性 —— 无任何效果，浏览器忽略
唯一跨浏览器、语义正确、可逆的方式，就是操作textTrack.mode。注意：必须确保track已加载完成（readyState === 2），否则mode读写可能静默失败。
移动端和iOS特别注意：字幕轨道可能默认disabled
iOS Safari 对支持较弱，尤其当src是相对路径或跨域时，textTracks长度可能为0，或mode始终为'disabled'。务必检查：
video.textTracks.length > 0-
track.readyState === 2（TextTrack.LOADED） -
track.kind === 'subtitles'或'captions'，避免误操作metadata轨
没确认这些就调track.mode，代码看似执行了，实际什么也没发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
