HTML添加track元素怎么操作？视频字幕配置方法 -html教程-PHP中文网

必须紧贴之后、之前，且kind、src、srclang、label四属性缺一不可；WebVTT文件需首行WEBVTT、UTF-8无BOM、正确时间戳格式；default仅对subtitles/captions有效；Safari需controls属性才显示字幕菜单。

html添加track元素怎么操作？视频字幕配置方法

track 必须紧贴 source 之后、video 内部

浏览器只在开始标签后、所有闭合之后、之前解析。放错位置等于没写，控制台不报错，字幕菜单直接消失。

常见错误包括：
– 把写在前面
– 塞进

 或注释中间
– 动态用 JS 插入已渲染的  内部（无效）
– 多个  之间夹了空行或 HTML 注释（部分浏览器中断解析）四个属性缺一不可：kind、src、srclang、label
浏览器靠这四个值生成右键字幕菜单。漏掉任意一个，对应轨道就不会出现在 UI 中——不是“不显示”，而是菜单里压根没有选项。
kind="subtitles" 必须全小写、无空格、拼写完整（caption、subtitles  都会失效）
src 必须指向可访问的 .vtt 文件（同源或服务端配好 CORS）
srclang 必须是标准 BCP 47 标签（如 zh、zh-Hans、zh-Latn；pinyin 或 zh-py 不被识别）
label 是用户看到的名字，建议含括号注明变体（如 中文(简体)、English (UK)）
WebVTT 文件必须严格合规
WebVTT 解析器容错率为零。哪怕一个字符出错，整个文件都会被静默忽略。
必须满足：
– 首行顶格、全大写、无空格、无 BOM：WEBVTT
– 时间戳格式为 00:00:01.234 --> 00:00:04.567（小时/分/秒均两位，毫秒三位，中间两个空格）
– 文件编码为 UTF-8 无 BOM（Windows 记事本默认带 BOM，务必改用 VS Code 等工具另存）
– 每段字幕用空行分隔，序号可选但推荐保留
– 服务器需返回 Content-Type: text/vtt，否则 Chrome/Firefox 拒绝加载

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
default 属性只对 subtitles/captions 有意义
default 是布尔属性，仅用于启用默认字幕轨道。它只应在 kind="subtitles" 或 kind="captions" 上使用；若加在 kind="chapters" 或 kind="descriptions" 上，不仅无效，还可能干扰章节导航逻辑。
多个  可并列，但只有一个能设 default（浏览器取第一个带该属性的）；若都不设，则默认关闭，用户需手动开启。
移动端 Safari 要求  必须带 controls 属性，否则字幕菜单根本不出现——这点容易被忽略，尤其在自定义播放器 UI 场景下。

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