怎么使用HTML内置的track元素实现无插件字幕加载-html教程-PHP中文网

track元素必须嵌套在含controls属性的video或audio内才生效，src需同源或配CORS，VTT文件须UTF-8无BOM、Content-Type为text/vtt且首行为WEBVTT。

怎么使用html内置的track元素实现无插件字幕加载

track元素必须配合video或audio使用才能生效

单独写标签浏览器完全忽略，它只是个“字幕轨道描述符”，不渲染也不加载。必须嵌套在或内部，且父媒体元素需有controls属性（否则即使加载成功也无法手动切换）。

常见错误是把写在里，或者忘了给加controls——这时控制栏不出现字幕按钮，用户根本看不到轨道选项。

✅
❌（无controls，字幕不可见）
❌（孤立存在，不触发任何加载）

src指向的VTT文件必须符合WebVTT格式且同源或配CORS

浏览器只认.vtt后缀，且内容开头必须是WEBVTT纯文本声明（不能有BOM、空行或注释在第一行）。路径必须可访问：若视频在https://example.com/video.mp4，而字幕在https://cdn.example.com/zh.vtt，则CDN响应头必须含Access-Control-Allow-Origin: *或精确匹配源，否则控制台报Failed to load resource: net::ERR_FAILED，但不会提示是CORS问题。

VTT示例（注意空行和时间格式）：

WEBVTT

00:00:01.000 --> 00:00:04.500
欢迎观看演示视频

00:00:05.200 --> 00:00:08.900
这是第二句字幕

kind、srclang、label三个属性缺一不可

kind="subtitles"明确用途（不是captions或descriptions），srclang="zh"让浏览器识别语言（影响自动匹配），label="中文"是用户在右键菜单或设置里看到的名称。漏掉srclang会导致多语言场景下无法通过video.textTracks[0].language读取；漏掉label则菜单显示为空白项或默认“subtitles”。

DeepBI DHTML 页面生成器

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

下载

英文+中文双轨：和
浏览器会根据系统语言自动启用匹配srclang的轨道（如果default未设）
设default属性可强制默认启用（如）

动态添加track需用JS调用addTextTrack方法

直接video.appendChild(trackEl)无效，必须走API：video.addTextTrack("subtitles", "中文", "zh")返回一个TextTrack对象，再手动设置track.mode = "showing"并绑定src（但此时src赋值不会触发加载，得用fetch读VTT内容后调用track.addCue()逐条注入）。

更实用的做法是：先用占位，JS中修改src再移除hidden，或直接替换整个DOM节点重新解析。

注意：动态添加的track不会自动下载VTT，除非其mode变为"showing"或"hidden"（"disabled"状态不加载）。

真正容易被忽略的是VTT文件编码和服务器MIME类型：必须UTF-8无BOM，且服务器要返回Content-Type: text/vtt。Nginx/Apache没配的话，Chrome可能静默失败，Firefox则直接拒绝解析。别只盯着HTML写法，后端响应头和文件本身才是卡点。