HTML字幕标签怎么判断是否加载完成-html教程-PHP中文网

字幕实际加载失败只能通过video的error事件结合target判断，readyState===2不保证.vtt文件已成功下载解析；cues.length>0才表明WebVTT内容已解析可用。

html字幕标签怎么判断是否加载完成

track 标签本身没有“加载完成”的事件或属性，浏览器不会通过它暴露字幕是否成功加载的状态。你真正能观测的，是 video.textTracks 中每个 TextTrack 实例的 readyState 值——但它只反映轨道元信息是否就绪，不表示 .vtt 内容已下载并解析完毕。

textTracks[i].readyState 的三个值不是“加载中/成功/失败”

它的取值只有 0（notLoaded）、1（loading）、2（loaded），但要注意：

loaded 仅表示 track 元素已解析、src URL 已知，不代表 .vtt 文件 HTTP 请求已完成
即使 readyState === 2，如果 .vtt 返回 404 或 CORS 被拒，控制台会报错，但 readyState 不会回退或置为错误态
没有 error 状态，也没有类似 onerror 的原生事件可监听

怎么知道字幕文件实际加载失败了

唯一可靠的方式是监听 video 元素上的 error 事件，并结合 event.target 判断是否来自 track 子资源：

Chrome / Edge：当 track.src 加载失败时，会触发 video 的 error 事件，且 event.target 是 HTMLTrackElement
Firefox：同样触发 video 的 error，但 event.target 是 video 自身，需靠 event.srcElement 或遍历 video.textTracks 检查 readyState 是否卡在 loading
Safari：对 track 错误更沉默，基本不抛 error，只能靠超时 + textTracks.length 与预期数量比对

示例判断逻辑：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

video.addEventListener('error', (e) => {
  if (e.target instanceof HTMLTrackElement) {
    console.warn('字幕加载失败:', e.target.src);
  }
});

如何确认字幕内容已解析并可用

最务实的做法是等 video 进入 canplay 或 loadeddata 阶段后，主动检查 textTracks：

遍历 video.textTracks，过滤出 kind === 'subtitles' 且 mode !== 'disabled' 的轨道
检查其 cues 属性：若 cues.length > 0，说明 WebVTT 已成功解析（注意 Safari 可能延迟填充 cues）
若需更高确定性，可加一个 setTimeout 延迟 100ms 后再查——部分浏览器在首次访问 cues 时才触发懒解析

容易被忽略的关键点

所有基于 textTracks 的判断都依赖同源或正确配置的 CORS；用 file:// 协议打开页面时，track.src 一律静默失败，连 error 事件都不会触发——这问题在线下调试时极难定位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！