HTML5 中怎么用 WebVTT 编写带基础样式的彩色与定位字幕效果-H5教程-PHP中文网

webvtt字幕实现彩色定位无需javascript：文件须以顶格大写webvtt开头、utf-8无bom编码、时间戳严格为hh:mm:ss.mmm --> hh:mm:ss.mmm；html中用track标签挂载，css通过::cue伪元素统一或按class/v标签精细控制样式。

html5 中怎么用 webvtt 编写带基础样式的彩色与定位字幕效果

直接用 WebVTT 文件配合 HTML 的 <track></track> 和 CSS 的 ::cue 伪元素，就能实现彩色、定位字幕，不需要 JavaScript。

基础 WebVTT 文件结构要合规

文件必须以顶格、全大写、无空格、无 BOM 的 WEBVTT 开头，后面跟一个空行，再写字幕块。时间戳格式严格为 HH:MM:SS.mmm --> HH:MM:SS.mmm（毫秒三位，中间两个空格）。例如：

WEBVTT

00:00:01.200 --> 00:00:04.500 line:80% position:90% align:end
<span class="highlight">你好，欢迎收看</span>

00:00:05.100 --> 00:00:08.300 line:20% position:10% align:start
<v speaker1>这是主讲人</v>

line 控制垂直位置（百分比或行号），position 控制水平偏移（百分比），align 决定文本对齐方式（start/center/end）
<v></v> 标签可标识说话人，配合 CSS 可区分样式；class 提示（如 class:highlight）可用于后续 CSS 精准控制
文件务必保存为 UTF-8 无 BOM 编码，否则中文会乱码或加载失败

用 ::cue 伪元素统一控制颜色与字体

在 HTML 的 <style></style> 或外部 CSS 中，用 ::cue 设置全局字幕样式：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

::cue {
  color: #ff6b6b;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 1.3em;
  font-family: "Microsoft YaHei", sans-serif;
  text-shadow: 1px 1px 2px black;
}

::cue 匹配所有字幕文本，适用于基础统一效果
::cue(b)、::cue(i) 可分别控制粗体/斜体字幕样式
::cue(.highlight) 能匹配 VTT 中带 class:highlight 的字幕行，实现差异化着色

进阶：用 class 提示 + CSS 实现多风格字幕

VTT 文件中可为不同语义的字幕添加 class 提示，再通过 CSS 分别定义：

00:00:10.000 --> 00:00:13.000 class:warning
注意：此处有重要提示！

00:00:14.500 --> 00:00:17.800 class:dialog
<v>我们继续下一环节。</v>

CSS 中写：::cue(.warning) { color: #ffd700; background: #333; }
::cue(v[lang="zh"]) { font-family: "Noto Sans CJK SC"; } 可按语言定制字体
避免在 VTT 中写内联 style —— WebVTT 不解析 HTML 属性，只认 class 和 v 标签

HTML 中正确挂载 track 并启用

确保 <track></track> 是 <video></video> 的直接子元素，且属性完整：

<video controls><source src="video.mp4" type="video/mp4"><track src="sub.vtt" kind="subtitles" srclang="zh" label="中文" default></track></source></video>