WebVTT 中用 标签标记说话人角色，格式为 ，仅在 .vtt 文件中生效，不支持属性，需配合 kind="subtitles" 和正确 MIME 类型（text/vtt）及 UTF-8 无 BOM 编码才能正常解析与显示。
WebVTT 中用 <v></v> 标签标记说话人角色
WebVTT 支持在字幕文本中用 <v></v> 标签包裹说话人名称，浏览器会将其识别为“发言者标识”，并在字幕显示时以不同样式（如加粗、缩进或前置提示）呈现。这不是 HTML 标签，而是 WebVTT 规范定义的内联标记，只在 .vtt 文件里生效，且必须紧贴文本内容，不能独立成行或嵌套其他标签。
-
<v></v>和<v></v>这类写法是合法的，空格后直接跟角色名，不加引号 - 角色名会被浏览器读作“主讲人：你好”——对屏幕阅读器友好，但需配合
kind="subtitles"才启用语音播报逻辑 - 不能写成
<v role="host"></v>或<v class="host"></v>，WebVTT 不解析属性，只认<v xxx></v>形式 - 同一段字幕里可多次使用
<v></v>，例如：<v>你好。<v>收到。</v></v>，但实际渲染效果取决于播放器（Chrome 显示为换行+缩进，Safari 可能仅加粗）
srclang 与角色无关，别指望靠它区分人物
srclang 是给整条轨道标语言用的，比如 srclang="zh" 表示“这条字幕轨道是中文”，不是“这段话是张三说的”。想靠 srclang="zh-zhangsan" 实现角色隔离？不行。浏览器只认 ISO 639-1（如 zh、en）或带区域码的格式（如 zh-Hans），不支持自定义后缀，写了也当无效值忽略。
- 多角色对话必须放在同一个 .vtt 文件里，用
<v></v>区分，而不是拆成多个<track></track> - 若真要按角色提供独立开关（比如用户只想看翻译员字幕），得做成两条轨道：
src="host.vtt"和src="translator.vtt"，每条各自用普通文本，不用<v></v> - 这种拆分方式会显著增加 HTTP 请求和维护成本，且无法保证时间轴完全同步
JavaScript 动态控制角色字幕需要绕过原生限制
原生 HTMLMediaElement.textTracks API 不暴露 <v></v> 内容，track.cues 里的每个 VTTCue 对象的 text 属性返回的是纯字符串（含 <v></v> 原样），你得自己正则提取角色名并过滤：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const track = video.textTracks[0];
track.mode = 'hidden'; // 先禁用原生渲染
for (const cue of track.cues) {
if (/<v\s+翻译员\s*>/i.test(cue.text)) {
// 插入到自定义 DOM 容器中
subtitleEl.textContent = cue.text.replace(/<v[^>]*>/g, '');
}
}
- 正则
/<v>]+)\s*>/</v>可捕获角色名，但注意 WebVTT 允许空格和中文，别写死英文单词 - 不能直接操作
cue.text赋值 HTML，因为它是只读属性；想改显示内容必须用自定义渲染层 - 原生字幕控件（右键菜单）完全不感知
<v></v>，它只管开/关整条轨道
真正影响角色可读性的其实是服务器配置和编码
哪怕 <v></v> 写得再准，如果 .vtt 文件带 BOM 或服务器返回 Content-Type: text/plain，Chrome 就直接拒绝解析，连字幕轨道都进不了 textTracks 列表——更别说识别角色了。
立即学习“前端免费学习笔记（深入）”；
- 检查响应头：必须是
Content-Type: text/vtt，Nginx/Apache 需显式配置 MIME 类型 - 用 VS Code 或 Notepad++ 确认保存为 “UTF-8 without BOM”，BOM 会导致首行
WEBVTT匹配失败 - 路径错误比语法错误更常见：浏览器控制台报
Failed to load resource: net::ERR_ABORTED，八成是src路径 404 或跨域没配 CORS
WebVTT 的 <v></v> 是轻量级角色标注，不是结构化数据管道。它起作用的前提是文件被正确加载、解析、启用——而这些环节里，任何一个配置疏漏都会让“张三”和“李四”同时消失，连字幕都出不来。
