HTML字幕标签怎么添加事件监听-html教程-PHP中文网

元素不触发 click 事件，因其仅为语义化元数据容器、不参与渲染与事件流；交互须通过的 texttrackchange、cuechange 等事件及 textTracks API 控制。

html字幕标签怎么添加事件监听

track 元素本身不触发 click 事件

是纯语义化元数据容器，浏览器不会把它渲染成可交互的 DOM 节点，也不派发 click、mouseover 等用户事件。你给它绑 addEventListener('click', ...) 不会生效——不是写错了，是它根本没这个能力。

常见错误现象：document.querySelector('track').addEventListener('click', ...) 静默失败，控制台无报错但回调从不执行；或取到的是 null，因为不在渲染树中。

只能通过的 API 控制字幕显隐和语言切换
它的状态变更（如启用/禁用某条字幕轨）会触发 video 元素的 loadstart、loadedmetadata 或 emptied，但不是直接事件源
无障碍场景下，屏幕阅读器会读出字幕内容，但这不经过 JS 事件流

监听字幕显示变化要用 video 的 texttrackchange 事件

真正反映字幕“是否正在显示”的信号来自元素自身的 texttrackchange 事件（部分浏览器也支持监听 addtrack 或检查 video.textTracks 的 onchange 属性）。

示例：监听当前激活的字幕轨

const video = document.querySelector('video');
video.addEventListener('texttrackchange', () => {
  const activeTrack = Array.from(video.textTracks)
    .find(track => track.mode === 'showing');
  console.log('当前显示字幕轨:', activeTrack?.label || '无');
});

textTracks 是只读的 TextTrackList，每个 TextTrack 有 mode（disabled / hidden / showing）
不要轮询 mode，而是监听 video 的 texttrackchange —— 它在用户切换字幕语言或开关字幕时触发
注意兼容性：texttrackchange 在 Chrome/Firefox/Edge 中稳定，Safari 16.4+ 才支持该事件名（旧版需监听 addtrack + 手动绑定子项 onchange）

想响应“用户点击字幕按钮”？监听 video 的 controls UI 事件不现实

原生视频控件里的字幕开关按钮（通常是个“CC”图标）是 UA Shadow DOM 内部实现，无法直接绑定事件，也不能用 CSS 选中或 JS 访问。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

如果你需要自定义字幕开关行为：

隐藏原生 controls：
用普通模拟开关，并手动调用 textTrack.mode = 'showing' 或 'disabled'
把自定义按钮和关联起来，例如用 data-track-id 匹配 textTracks[i].id
这样你就能自由监听按钮的 click，并精确控制哪条轨启用

字幕内容更新时怎么触发逻辑？靠 timeupdate + cuechange

字幕文本实际显示变化发生在时间轴推进时，此时触发的是 TextTrackCue 的 enter / exit，但这些事件不能直接监听——必须先拿到具体 cue 实例。

可行路径：

const track = video.textTracks[0];
track.mode = 'hidden'; // 防止自动显示干扰
track.addEventListener('cuechange', () => {
  const showingCues = track.activeCues;
  if (showingCues.length > 0) {
    console.log('当前显示字幕:', showingCues[0].text);
  }
});