跟踪元素使用入门

HTML5 Rocks

HTML5 跟踪元素使用入门

跟踪元素提供了一种简单的标准方法,供您将字幕、解说、屏幕阅读器说明和章节添加到视频和音频中。

跟踪还可用于其他种类的定时元数据。每个跟踪元素的源数据都是由定时 cues 列表组成的文本文件,插入点可包含 JSON 或 CSV 格式的数据。这种极其强大的结构可让您通过文本搜索、DOM 操作或与媒体播放同步的其他行为实现深层链接和媒体导航。

目前,跟踪元素适用于 Internet Explorer 10Chrome 浏览器 18 及更高版本。Firefox 支持尚未实施。在 Chrome 浏览器中,您必须访问 chrome://flags 页面启用跟踪元素支持。

下面是一个包含跟踪元素的视频的简单示例。播放视频以查看英语字幕:

此演示需要支持跟踪元素的浏览器,例如 Google Chrome 浏览器 Canary 版。在 Chrome 浏览器中,您必须访问 chrome://flags 页面启用跟踪元素支持。

包含英语和德语字幕的视频元素代码如下所示:

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

在此示例中,视频元素将显示一个选择器,供用户选择字幕语言(但在撰写本文时,该选择器尚未实施)。

请注意,您无法通过 file:// 网址使用跟踪元素。要查看有效跟踪,请将文件放到网络服务器上。

每个跟踪元素都有 kind 属性,其值可为 subtitlescaptionsdescriptionschaptersmetadata。跟踪元素 src 属性指向保存定时跟踪插入点数据的文本文件,该文件可采用浏览器可解析的任何格式。Chrome 浏览器支持 WebVTT,具体如下所示:

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

跟踪文件中的每一项称为一个插入点。每个插入点均由以箭头分隔的开始时间和结束时间组成,插入点文本位于下一行中。插入点也可以包含 ID:以上示例中的“railroad”和“manuscript”。插入点以空行分隔。

插入点时间的格式为“小时:分钟:秒:毫秒”。请注意!解析过程很严格。如果可以,您必须用零补足位数:小时、分钟和秒必须为两位数(零值为 00),毫秒必须为三位数(零值为 000)。您可以访问 quuz.org/webvtt,使用这个超实用的 WebVTT 验证器检查时间格式错误和时间不连续等问题。

以下演示介绍了如何通过搜索字幕在视频中导航。

在插入点中使用 HTML 和 JSON

在 WebVTT 文件中,插入点文本可为多行,前提是每行都不为空。也就是说,插入点可以包含 HTML:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Multi-celled organisms have different types of cells that perform specialised functions.</p>
<p>Most life that can be seen with the naked eye is multi-cellular.</p>
<p>These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.</p>

再进一步,插入点也可以使用 JSON:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Multi-celled organisms",
"description": "Multi-celled organisms have different types of cells that perform specialised functions.
  Most life that can be seen with the naked eye is multi-cellular. These organisms are though to
  have evolved around 1 billion years ago with plants, animals and fungi having independent
  evolutionary paths.",
"src": "multiCell.jpg",
"href": "http://en.wikipedia.org/wiki/Multicellular"
}

insects
00:02:18.800 --> 00:03:01.600
{
"title": "Insects",
"description": "Insects are the most diverse group of animals on the planet with estimates for the total
  number of current species range from two million to 50 million. The first insects appeared around
  400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes
  and antennae.",
"src": "insects.jpg",
"href": "http://en.wikipedia.org/wiki/Insects"
}

插入点对结构化数据的支持让跟踪元素变得无比强大而灵活。网络应用可以侦听插入点事件,在事件触发时提取每个插入点的文本,解析相关数据,然后使用结果执行与媒体播放同步的 DOM 更改(或执行其他 JavaScript 或 CSS 任务)。

您也可以通过跟踪向音频和视频添加值,从而让搜索变得更轻松、更强大、更准确。

插入点包含可编入索引的文本,以及表示内容在媒体中的临时“位置”的开始时间。插入点甚至可以包含有关视频帧中内容位置的数据。结合媒体片段 URI,跟踪可以提供强大的机制,供您查找和导航到音频和视频中的内容。例如,如果搜索“张三”,返回的结果就会直接链接到视频的插入点文本中出现该姓名的位置。

生命之树演示这个简单的示例介绍了如何使用元数据跟踪通过字幕搜索实现导航,以及如何通过定时元数据实现与媒体播放同步的 DOM 操作。

了解使用 JavaScript 的跟踪和插入点

音频和视频元素包含会返回 TextTrackListtextTracks 属性,其中每个部分都是与 <track> 元素对应的 TextTrack

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; // one for each track element
var textTrack = textTracks[0]; // corresponds to the first track element
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2 (TextTrack.SHOWING)

反过来,每个 TextTrack 都包含会返回 TextTrackCueListcues 属性,其中每个部分都是一个单独的插入点。您可以通过 startTimeendTimetext(用于获取插入点的文本内容)等属性访问插入点数据:

var cues = textTrack.cues;
var cue = cues[0]; // corresponds to the first cue in a track src file
var cueId = cue.id // cue.id corresponds to the cue id set in the WebVTT file
var cueText = cue.text; // "The Web is always changing", for example (or some JSON!)

有时,通过 HTMLTrackElement 了解 TextTrack 对象也是可行的:

var trackElements = document.querySelectorAll("track");
// for each track element
for (var i = 0; i < trackElements.length; i++) {
  trackElements[i].addEventListener("load", function() {
    var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object
    var isSubtitles = textTrack.kind === "subtitles"; // for example...
    // for each cue
    for (var j = 0; j < textTrack.cues.length; ++j) {
      var cue = textTrack.cues[j];
      // do something
    }
}

如此例中所示,系统是通过跟踪元素的 track 属性而非该元素本身访问 TextTrack 属性的。

您可以在 load 事件触发后访问 TextTrack,但在此之前则不行。

跟踪和插入点事件

插入点事件有两种类型:

  • 因插入点而触发的 enter 和 exit 事件
  • 因跟踪而触发的 cuechange 事件。

在之前的示例中,您可以通过以下方式添加插入点事件侦听器:

cue.onenter = function(){
  // do something
};

cue.onexit = function(){
  // do something else
};

请注意,只有在通过播放进入或退出插入点时,系统才会触发 enter 和 exit 事件。如果用户手动拖动时间轴滑块,就会在另一时间因跟踪而触发 cuechange 事件,但不会触发 enter 和 exit 事件。您可以侦听 cuechange 跟踪事件,然后获取有效插入点,从而解决该问题(请注意,有效插入点可能不止一个)。

在插入点出现更改后,以下示例获取了当前插入点,并尝试通过解析插入点文本创建对象:

textTrack.oncuechange = function (){
  // "this" is a textTrack
  var cue = this.activeCues[0]; // assuming there is only one active cue
  var obj = JSON.parse(cue.text);
  // do something
}

不仅仅适用于视频

请注意,跟踪可用于音频和视频,而且您无需使用 HTML 标记形式的音频、视频或跟踪元素即可利用相应的 API。对于这一点,TextTrack API 文档中提供了很好的示例,介绍了实施音频“贴图”的巧妙方法:

var sfx = new Audio('sfx.wav');
var track = sfx.addTextTrack('metadata'); // previously implemented as addTrack()

// Add cues for sounds we care about.
track.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
track.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = track.getCueById(id).startTime;
  sfx.play();
}

playSound('dog bark');
playSound('kitten mew');

addTextTrack 方法带有三个参数:kind(例如“metadata”,如上所示)、label(例如“Sous-titres français”)和 language(例如“fr”)。

以上示例还使用了带有 TextTrackCue 对象的 addCue,TextTrackCue 对象的构造函数带有 id(例如“dog bark”)、startTimeendTime、插入点 textwebVTT cue settings 参数(用于定位、调整字体大小和对齐方式)和 pauseOnExit 布尔值标记(例如,在教育视频中提出问题后暂停播放)。

请注意,startTimeendTime 使用以秒为单位的浮点数值,而非在 WebVTT 中使用的“小时:分钟:秒:毫秒”格式。

您也可以通过以插入点作为参数的 removeCue() 删除插入点,例如:

var videoElement = document.querySelector("video");
var track = videoElement.textTracks[0];
var activeCue = track.activeCues[0];
track.removeCue(activeCue);

如果您试用一下这段代码,就会发现,调用代码后,系统会立即删除呈现的插入点。

跟踪的 mode 属性可以为 0(在规范中为 TextTrack.OFF,在 Chrome 浏览器中为 TextTrack.DISABLED)、1 (TextTrack.HIDDEN) 或 2 (TextTrack.SHOWING)。如果要使用跟踪事件同时停用默认呈现,您可以使用此属性。观看以下视频了解相关示例(创作者:埃里克·比德曼 (Eric Bidelman)):

test1
asdf2

此示例使用了 getCueAsHTML() 方法,该方法会返回每个插入点的 HTML 版本,系统是通过 WebVTT 插入点文本解析DOM 结构规则将 WebVTT 格式转换成 HTML DocumentFragment 的。如果您只想获取插入点在 src 文件中的原始文本值,请使用插入点的 text 属性。

在这种情况下,您可以使用 getCueAsHTML() 方法,该方法会返回每个插入点的 HTML 版本,系统是通过 WebVTT 插入点文本解析DOM 结构规则将 WebVTT 格式转换成 HTML DocumentFragment 的。如果您只想获取插入点在 src 文件中的原始文本值,请使用插入点的 text 属性。

有关标记的更多信息

您可以在插入点的时间戳行上添加标记,以指定文字方向、对齐方式和位置。您可以标记插入点文本,以指定语音(例如提供说话者的姓名)和添加格式。您可以通过 CSS 操作字幕和解说,具体如下所示:

::cue {
  color: #444;
  font: 1em sans-serif;
}
::cue .warning {
  color: red;
  font: bold;
}

西尔维娅·菲佛 (Silvia Pfeiffer) 的 HTML5 视频辅助功能幻灯片提供了更多标记用例,还介绍了如何构建用于导航的章节跟踪和用于屏幕阅读器的说明跟踪。

最后...

请将插入点数据存储在文本文件中,而不是在音频或视频文件中对这些数据进行带内编码,这样可以简化字幕和解说,便于访问、搜索和数据传输。

您还可以通过跟踪元素使用与媒体播放关联的定时元数据和动态内容,进而向音频和视频元素添加值。

跟踪元素的强大功能、灵活性和易用性大大促进了网络媒体的开放性和动态性。

了解详情

Comments

0