HTML中track元素怎么同步显示翻译-html教程-PHP中文网

浏览器原生不支持两个track同时显示翻译和拼音，因textTracks中任意时刻最多一个轨道处于mode="showing"状态；必须将翻译与拼音合并至单个VTT文件，用标签分组并配合CSS控制换行，且srclang需设为"zh"和"zh-Latn"。

html中track元素怎么同步显示翻译

为什么两个 track 不能同时显示翻译和拼音

浏览器原生不支持多个 track 同时激活渲染——textTracks 中任意时刻最多一个轨道处于 mode = "showing" 状态。即使你写了两个，也只会显示其中一个。所谓“双语字幕”，必须靠单个 VTT 文件内嵌多行文本实现，而不是靠多个 track 并行加载。

怎么在单个 VTT 里写翻译 + 拼音两行

关键不是加两个 track，而是把翻译和拼音合并进同一个 .vtt 文件，并用标签分组+CSS控制换行：

WEBVTT

00:00:01.000 --> 00:00:04.000
<v class="translation">你好，很高兴见到你。</v><v class="pinyin">nǐ hǎo, hěn gāo xìng jiàn dào nǐ.</v>

然后配 CSS 让两行上下排列：

::cue(.translation) { display: block; }
::cue(.pinyin) { display: block; margin-top: 0.2em; }

DeepBI DHTML 页面生成器

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

下载

注意：srclang 要按语义设对——翻译用 srclang="zh"，拼音用 srclang="zh-Latn"（不是 "pinyin" 或 "zh-py"），否则辅助技术无法识别。

常见失败点：VTT 文件格式一错全错

VTT 解析器极其严格，以下任一错误都会导致整条 cue 被跳过，且控制台无报错：

WEBVTT 必须顶格、全大写、无空格、无 BOM；
时间戳必须是 00:00:01.234 --> 00:00:04.567 格式：小时/分/秒两位、毫秒三位、箭头前后各两个空格；
首行 WEBVTT 后必须空一行，再写 cue；
文件编码必须是 UTF-8 无 BOM（Windows 记事本默认带 BOM，务必用 VS Code 或 Sublime 重存）；
src 路径不能是 Blob URL，必须是可访问的相对或绝对 URL；本地开发需起服务，file:// 协议下全部失效。

流媒体（HLS/DASH）里 track 标签完全不生效

如果你用的是 hls.js 或 dash.js，原生标签只是摆设——它不会解析 m3u8 或 mpd 中的字幕轨道，也不会处理 TS 分片里的 WEBVTT 载荷。所有字幕都得由播放器 JS 解析后，手动调用 video.addTextTrack() 注入 textTracks，再精确对齐时间轴。动态添加必须等 hls 实例 ready 后执行，否则返回的 TextTrack 对象无法被识别。

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