HTML track元素default属性的使用规则-html教程-PHP中文网

default属性不能让字幕默认显示，仅在页面首次加载、无用户干预、唯一subtitles轨道、srclang匹配且src加载成功等严苛条件下才可能启用；应改用JS监听loadedmetadata后设mode="showing"。

html track元素default属性的使用规则

default 属性不能让字幕“默认显示”，它只在极窄条件下可能让某条进入 mode = "showing" 状态，且一旦用户点过字幕开关就永久失效。别把它当开关用，得靠 JS 控制。

为什么加了 default 却没显示字幕

这不是你写错了，是浏览器根本没按你想的执行。常见原因包括：

srclang 值不合法：比如写成 zh-CN，但用户系统语言是 zh；或拼错为 chinese
多个都写了 default → 多数浏览器直接忽略全部，或只启用第一个（行为未定义）
kind 不是 "subtitles"（例如用了 "captions"），Safari 等浏览器不对其应用 default 逻辑
src 对应的 .vtt 文件返回 404、CORS 错误，或服务端没返回 text/vtt MIME 类型 → 轨道加载失败，default 失去作用对象
视频尚未触发 loadedmetadata 事件，video.textTracks 还为空，浏览器来不及处理 default

default 属性的真实生效条件

它不是“默认打开”，而是一个初始状态信号，仅当同时满足以下全部条件时才可能启用：

页面首次加载，且用户从未点击过播放器上的字幕开关（包括关闭、切换、静音字幕等）
该的 kind="subtitles" 且 srclang 是有效 BCP 47 语言码（如 zh、en-US）
src 可成功加载（HTTP 200 + text/vtt MIME）
同一中只有一个带 default 属性
不在 Safari 私密模式下 —— 此时连节点都可能被跳过解析

真正可控的默认启用方式：用 JS 主动设 `mode`

绕过 default 的不确定性，监听 loadedmetadata 后手动匹配并启用：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

video.addEventListener('loadedmetadata', () => {
  const lang = navigator.languages?.[0] || document.documentElement.lang || 'zh';
  const targetTrack = Array.from(video.textTracks).find(track => 
    track.kind === 'subtitles' && 
    (track.srclang === lang || track.srclang.startsWith(lang.split('-')[0]))
  );
  if (targetTrack) {
    targetTrack.mode = 'showing';
    Array.from(video.textTracks)
      .filter(t => t !== targetTrack && t.kind === 'subtitles')
      .forEach(t => t.mode = 'disabled');
  }
});

注意：textTracks 是实时集合，必须等 loadedmetadata 触发后才能遍历；mode 只能设为 "disabled"、"hidden" 或 "showing"；设 "showing" 前要确保轨道已加载完成（track.readyState === 2），否则无效。

最易被忽略的一点：即使 JS 设置了 mode = "showing"，如果用户之前手动关闭过该轨道（哪怕只是点了一下再关掉），部分浏览器会记住这个偏好，后续仍拒绝显示——此时需配合播放器 UI 重置逻辑或 localStorage 记录用户显式选择。