HTML5 中怎么用 track 标签加载带有外语翻译与拼音对照的语言学习字幕-H5教程-PHP中文网

track标签仅声明字幕轨道，双行字幕需合并至单个WebVTT文件并用标签分层+CSS的::cue(.class)控制样式，或用JavaScript动态合成。

html5 中怎么用 track 标签加载带有外语翻译与拼音对照的语言学习字幕

track 标签本身不负责“加载”字幕，而是声明外部字幕轨道的位置和类型；要实现外语翻译与拼音对照的双行字幕，需配合 WebVTT 文件内容设计与 CSS 控制，而非仅靠 HTML 属性。

1. 正确使用 track 标签声明多轨道

一个视频可声明多个 track，例如分别用于翻译（中文）和拼音（汉语拼音）。每个 track 必须有唯一 kind、srclang 和 label：

<video controls><source src="lesson.mp4" type="video/mp4"><track kind="subtitles" srclang="zh" label="中文翻译" src="translation.vtt" default><track kind="subtitles" srclang="zh-Latn" label="汉语拼音" src="pinyin.vtt"></track></track></source></video>

注意：
– srclang="zh" 表示简体中文语义内容（翻译）
– srclang="zh-Latn" 是标准 BCP 47 语言标签，表示“中文（拉丁字母转写）”，浏览器能识别为拼音类轨道
– 不要用自定义值如 "pinyin" 或 "zh-py"，否则无法被辅助技术或系统正确识别

2. 在 WebVTT 文件中实现双行显示（关键步骤）

浏览器默认只激活一个 track。若想同时显示翻译 + 拼音（上下两行），不能依赖两个独立 track 自动叠加——需将二者合并进**单个 VTT 文件**，用 HTML 内联样式控制布局：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

WEBVTT

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

这样一段 VTT 就包含两行文本：上行为中文翻译，下行为对应拼音。关键点：
– 使用标签包裹不同语义行，并添加 class 方便 CSS 定位
– 确保换行符是真实回车（\n），不是空格或
标签（VTT 不解析 HTML 标签，但支持有限内联 HTML 如、，且需启用 allowTransparency 等设置时才渲染样式）
– 更可靠的做法：用 CSS 的 ::cue 匹配不同 class，例如：

video::cue(.translation) { font-size: 1.2em; line-height: 1.4; }
video::cue(.pinyin)    { font-size: 0.9em; color: #666; line-height: 1.4; }

3. 替代方案：用 JavaScript 动态合成双轨字幕

若需完全可控（比如用户可自由开关翻译/拼音/原文），可禁用原生 track，改用 JS 解析两个 VTT 文件，按时间戳对齐后注入自定义字幕层：

用 Fetch 加载 translation.vtt 和 pinyin.vtt
解析成时间块数组，按 start 时间合并成新块：{start, end, translation, pinyin}
监听 video 的 timeupdate 事件，在 DOM 中更新一个绝对定位的字幕 div
HTML 结构示例：<div class="subtitle"> <div class="trans">…</div> <div class="pinyin">…</div> </div>

优势：支持字体、颜色、阴影、多语言切换、断句优化；缺点是需自行处理同步与性能。