HTML的WebVTT格式：在“元素中实现带样式字幕与元数据嵌入 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML的WebVTT格式：在`<track>`元素中实现带样式字幕与元数据嵌入

大家好，今天我们来深入探讨HTML5中WebVTT (Web Video Text Tracks) 格式，以及如何利用<track>元素在网页中实现带样式字幕和元数据嵌入。WebVTT是一种基于文本的格式，专门设计用于显示与HTML5 <video> 和 <audio> 元素同步的定时文本数据，例如字幕、标题、描述、章节标题以及其他类型的元数据。它比传统的字幕格式（如SRT）更加强大，因为它支持样式设置和更丰富的功能。

WebVTT格式详解

WebVTT文件本质上是一个文本文件，使用.vtt扩展名。其结构由一个可选的WEBVTT 文件头、可选的STYLE块（用于定义CSS样式），以及一系列cue（提示）组成。每个cue定义了文本内容以及显示该内容的时间范围。

1. 文件头 (File Header):

WebVTT文件以 WEBVTT 开头，这是一个强制性的标识符。之后可以跟一个可选的字符串来描述文件类型。

WEBVTT
Kind: captions
Language: en

2. 样式块 (Style Block):

STYLE 块允许你定义应用于cue文本的CSS样式。这使得你可以控制字幕的字体、颜色、位置、大小等。STYLE 块必须放在第一个cue之前。

WEBVTT

STYLE
::cue {
  color: yellow;
  font-size: 120%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

STYLE
::cue(b) {
  font-weight: bold;
  color: white;
}

在这个例子中，我们定义了两种样式：

::cue: 应用于所有cue文本，设置颜色为黄色，字体大小为120%，并添加阴影。
::cue(b): 应用于cue文本中标签包裹的部分，设置字体加粗，颜色为白色。

3. Cue (提示):

每个cue包含以下部分：

可选的Cue ID: 一个唯一的标识符，用于引用特定的cue。
时间戳: 指示cue开始和结束显示的时间。时间戳的格式为 HH:MM:SS.milliseconds --> HH:MM:SS.milliseconds。
可选的Cue设置: 控制cue的显示位置、对齐方式、大小等。
文本内容: 实际显示的字幕文本。

WEBVTT

00:00:00.000 --> 00:00:05.000
Hello, world! This is a simple subtitle.

00:00:05.000 --> 00:00:10.000 position:50% line:84% align:center size:50%
<b>This subtitle</b> is positioned at the center of the screen.

在这个例子中：

第一个cue ID 被省略。
第一个cue从0秒开始，显示到5秒。
第二个cue从5秒开始，显示到10秒，设置了位置、行、对齐方式和大小。
第二个cue的文本使用了标签，该标签会被STYLE块中定义的::cue(b)样式影响。

Cue设置的详细说明：

设置项	描述	示例
`position`	定义cue在视频中的水平位置。可以是百分比（相对于视频宽度）或`auto`（由浏览器自动决定）。	`position:50%` (居中)
`line`	定义cue在视频中的垂直位置。可以是百分比（相对于视频高度）、行号（从底部向上计数）或`auto`（由浏览器自动决定）。行号可以为正数或负数，正数表示从底部向上计数，负数表示从顶部向下计数。	`line:84%`, `line:-2` (从顶部向下第二行)
`size`	定义cue的宽度，以百分比表示（相对于视频宽度）。	`size:50%`
`align`	定义cue文本的对齐方式。可以是 `start` (左对齐)、`middle` (居中)、`end` (右对齐)、`left` (左对齐，与`start`相同)、`right` (右对齐，与`end`相同)。	`align:center`
`vertical`	定义文本的垂直方向。可以是 `lr` (从左到右) 或 `rl` (从右到左)。通常用于处理垂直书写的语言，例如中文、日文等。	`vertical:rl`
`region`	指定cue所属的区域。区域需要在WebVTT文件的头部使用 `REGION` 关键字定义。这允许你将不同的字幕或文本放置在视频的不同区域中。	`region: myRegion`

4. 区域 (Region):

区域允许你定义视频播放器中的特定区域，并将字幕限制在该区域内。可以在WebVTT文件的头部使用 REGION 关键字定义区域。

WEBVTT

REGION
id: myRegion
width: 50%
height: 25%
lines: 3
regionanchor: 0%,100%
viewportanchor: 0%,100%

00:00:00.000 --> 00:00:05.000 region:myRegion
This subtitle is displayed in the defined region.

在这个例子中：

REGION 块定义了一个名为 myRegion 的区域。
width 和 height 定义了区域的宽度和高度，相对于视频的宽度和高度。
lines 定义了区域中可以显示的文本行数。
regionanchor 定义了区域的锚点，即区域的哪个点用于定位。这里是左下角 (0%, 100%)。
viewportanchor 定义了视口的锚点，即视频播放器的哪个点用于定位区域。这里也是左下角 (0%, 100%)。

文本格式化:

WebVTT支持一些简单的文本格式化标签：

：加粗文本。
：斜体文本。
：下划线文本。
<c.className>：应用CSS类。例如 <c.redText>This text is red.</c>，需要预先在STYLE块中定义.redText样式。
<v SpeakerName>：指定说话者。例如 <v John>Hello, world!</v>。说话者的名字可以用于样式设置。
<ruby>base<rt>annotation</rt></ruby>: 用于注音，通常用于东亚文字。

示例WebVTT文件：

WEBVTT
Kind: captions
Language: en

STYLE
::cue {
  color: yellow;
  font-size: 120%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

STYLE
::cue(b) {
  font-weight: bold;
  color: white;
}

STYLE
::cue(.redText) {
  color: red;
}

STYLE
::cue(v[John]) {
  color: blue;
}

REGION
id: bottomRegion
width: 100%
height: 20%
lines: 2
regionanchor: 0%,100%
viewportanchor: 0%,100%

00:00:00.000 --> 00:00:05.000 region:bottomRegion
Hello, world! This is a simple subtitle.

00:00:05.000 --> 00:00:10.000 position:50% line:84% align:center size:50%
<b>This subtitle</b> is positioned at the center of the screen.

00:00:10.000 --> 00:00:15.000
This text is <c.redText>red</c>.

00:00:15.000 --> 00:00:20.000
<v John>Hello, my name is John.</v>

00:00:20.000 --> 00:00:25.000
你好，世界！<ruby>世界<rt>shì jiè</rt></ruby>

使用`<track>`元素嵌入WebVTT

<track>元素用于将WebVTT文件与HTML5 <video>或<audio>元素关联起来。它是一个空元素，必须包含一个 src 属性，指向WebVTT文件的URL。

<!DOCTYPE html>
<html>
<head>
<title>WebVTT Example</title>
</head>
<body>

<video width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

</body>
</html>

在这个例子中：

<video> 元素定义了一个视频播放器。
<source> 元素指定视频文件的URL和类型。
<track> 元素指定WebVTT字幕文件的URL、类型、语言和标签。

<track>元素的属性：

属性	描述
`src`	指定WebVTT文件的URL。
`kind`	指定track的类型。可以是以下值：`subtitles` (字幕)、`captions` (隐藏字幕)、`descriptions` (描述)、`chapters` (章节标题)、`metadata` (元数据)。
`srclang`	指定字幕的语言，使用ISO 639-1语言代码。
`label`	指定字幕的标签，用于在视频播放器的字幕菜单中显示。
`default`	指示是否默认启用此track。如果设置为`default`，则在页面加载时会自动显示此字幕。

kind属性的详细说明：

subtitles: 用于翻译视频中的对话，通常是外语翻译。
captions: 用于为听力障碍人士提供对话和声音效果的文本描述，包含对白和重要的声音信息（例如 "[门铃响]"）。
descriptions: 用于为视力障碍人士提供视频内容的文本描述，描述场景、人物和动作。
chapters: 用于创建视频的章节标题，允许用户快速跳转到视频的不同部分。
metadata: 用于嵌入与视频相关的元数据，例如时间戳、关键词、事件触发器等。这些元数据可以被JavaScript访问，用于实现各种功能，例如互动视频、游戏等。

使用JavaScript操作WebVTT

可以使用JavaScript来动态控制WebVTT track，例如选择不同的字幕、显示或隐藏字幕、读取元数据等。

<!DOCTYPE html>
<html>
<head>
<title>WebVTT Example</title>
</head>
<body>

<video id="myVideo" width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <track id="englishSubtitles" src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track id="chineseSubtitles" src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="Chinese">
  Your browser does not support the video tag.
</video>

<button onclick="toggleSubtitles()">Toggle Subtitles</button>
<div id="subtitleOutput"></div>

<script>
  var video = document.getElementById("myVideo");
  var englishSubtitles = document.getElementById("englishSubtitles");
  var chineseSubtitles = document.getElementById("chineseSubtitles");
  var subtitleOutput = document.getElementById("subtitleOutput");

  function toggleSubtitles() {
    if (englishSubtitles.track.mode === "showing") {
      englishSubtitles.track.mode = "disabled";
      chineseSubtitles.track.mode = "showing";
    } else if (chineseSubtitles.track.mode === "showing") {
      chineseSubtitles.track.mode = "disabled";
      englishSubtitles.track.mode = "showing";
    } else {
        englishSubtitles.track.mode = "showing";
    }
  }

  video.textTracks.addEventListener('addtrack', function(event) {
    var track = event.track;

    track.addEventListener('cuechange', function() {
      if (this.activeCues && this.activeCues[0]) {
        subtitleOutput.textContent = this.activeCues[0].text;
      } else {
        subtitleOutput.textContent = "";
      }
    });
  });
</script>

</body>
</html>

在这个例子中：

我们获取了<video>元素和<track>元素的引用。
toggleSubtitles() 函数用于切换英语和中文字幕的显示状态。
video.textTracks.addEventListener('addtrack', ...) 监听 track 元素被添加到视频元素后的事件。
track.addEventListener('cuechange', ...) 监听当前显示的cue发生改变的事件，并获取当前激活的cue的文本内容，将其显示在subtitleOutput div中。

访问元数据:

如果<track>元素的 kind 属性设置为 metadata，你可以使用JavaScript访问WebVTT文件中包含的元数据。

<!DOCTYPE html>
<html>
<head>
<title>WebVTT Metadata Example</title>
</head>
<body>

<video id="myVideo" width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <track id="metadataTrack" src="metadata.vtt" kind="metadata">
  Your browser does not support the video tag.
</video>

<div id="metadataOutput"></div>

<script>
  var video = document.getElementById("myVideo");
  var metadataTrack = document.getElementById("metadataTrack");
  var metadataOutput = document.getElementById("metadataOutput");

  metadataTrack.onload = function() {
    var cues = metadataTrack.track.cues;
    for (var i = 0; i < cues.length; i++) {
      var cue = cues[i];
      cue.onenter = function() {
        metadataOutput.textContent = "Metadata: " + this.text;
      };
      cue.onexit = function() {
        metadataOutput.textContent = "";
      };
    }
  };
</script>

</body>
</html>

对应的 metadata.vtt 文件：

WEBVTT

00:00:05.000 --> 00:00:10.000
Chapter 1: Introduction

00:00:15.000 --> 00:00:20.000
Key Concept: WebVTT Format

在这个例子中：

metadataTrack.onload = function() { ... } 确保在WebVTT文件加载完成后执行代码。
我们遍历了所有的cue，并为每个cue添加了 onenter 和 onexit 事件处理函数。
onenter 事件在视频播放到cue的时间范围内时触发，onexit 事件在视频离开cue的时间范围时触发。
在事件处理函数中，我们将cue的文本内容显示在metadataOutput div中。

WebVTT的优势与局限性

优势：

标准化： WebVTT是W3C标准，得到主流浏览器的广泛支持。
样式支持： 可以使用CSS样式来控制字幕的外观。
元数据支持： 可以嵌入与视频相关的元数据，用于实现各种功能。
可访问性： 方便为听力障碍和视力障碍人士提供辅助内容。
易于编辑： WebVTT文件是纯文本文件，可以使用任何文本编辑器进行编辑。

局限性：

复杂性： WebVTT格式比简单的字幕格式（如SRT）更复杂，需要更多的时间来学习和掌握。
浏览器兼容性： 虽然主流浏览器都支持WebVTT，但不同浏览器对WebVTT的支持程度可能存在差异。
性能： 大量的样式和复杂的元数据可能会影响视频播放的性能。

结论：WebVTT 是网络视频字幕和元数据的强大工具

WebVTT格式为在Web视频中添加字幕、标题和元数据提供了一种强大而灵活的方式。通过<track>元素和JavaScript，我们可以轻松地将WebVTT文件集成到HTML5视频播放器中，并动态控制其行为。虽然WebVTT格式比一些简单的字幕格式更复杂，但其提供的额外功能和标准化使其成为现代Web视频应用程序的理想选择。

HTML的WebVTT格式：在<track>元素中实现带样式字幕与元数据嵌入

WebVTT格式详解

使用<track>元素嵌入WebVTT

使用JavaScript操作WebVTT

WebVTT的优势与局限性

结论：WebVTT 是网络视频字幕和元数据的强大工具

发表回复 取消回复

HTML的WebVTT格式：在`<track>`元素中实现带样式字幕与元数据嵌入

使用`<track>`元素嵌入WebVTT

发表回复取消回复