HTML里track元素怎么开启默认字幕？默认属性设置教学-html教程-PHP中文网

default属性不可靠，仅是弱提示信号；其生效需同时满足页面首次加载、用户未操作字幕开关、kind="subtitles"、srclang合法、src可加载、唯一default、非Safari私密模式等全部条件。

html里track元素怎么开启默认字幕？默认属性设置教学

default

属性不能可靠开启字幕，它只是个弱提示信号，多数情况下根本不起作用。

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

这不是代码写错了，是浏览器压根没按你设想的逻辑执行。常见失效原因包括：

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

`default` 的真实生效条件

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

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

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

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

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

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"。