webvtt_使用WebVTT章节创建交互式HTML5视频

webvtt

WebVTT is associated with subtitling HTML5 video, but the spec contains many additional features that aren’t related to dialogue. One of the most useful of these is the ability to read and link to video cue points. Creating WebVTT chapter tracks deepens viewer’s engagement with more informative content, while adding invaluable accessibility and UI features. Best of all, they’re easy to create.

WebVTT与字幕HTML5视频相关联，但该规范包含许多与对话无关的其他功能。 其中最有用的功能之一就是能够读取和链接到视频提示点。 创建WebVTT章节会跟踪更多信息内容，从而加深观众的参与度，同时增加宝贵的可访问性和UI功能。 最重要的是，它们很容易创建。

一本旧书的新章节 (New Chapters For An Old Book)

Anyone comfortable with a tool like iMovie can add chapter cue points to video in minutes. Created in an application like Subs Factory and exported as a .srt file, then converted to .vtt format, the cue points will look something like this:

熟悉iMovie之类的工具的任何人都可以在几分钟内将章节提示点添加到视频中。 在诸如Subs Factory之类的应用程序中创建并导出为.srt文件，然后转换为.vtt格式，提示点如下所示：

WEBVTT
1
00:00:06.254 --> 00:00:11.758
Central downtown Los Angeles
 
2
00:00:11.882 --> 00:00:15.184
Rosslyn Hotel

WebVTT information can be “in-band” (wrapped up as part of the video file itself) or “out-of-band” (held as a separate file). Currently, all modern browsers support the latter.

WebVTT信息可以是“带内”(包装为视频文件本身的一部分)或“带外”(保存为单独的文件)。 当前，所有现代浏览器都支持后者。

链接时间和空间 (Linking Time & Space)

The video is added to the page with some supporting markup:

视频已添加到页面并带有一些支持的标记：

<figure>
	<video controls id="downtown-los-angeles">
		<source src="downtown-los-angeles.mp4">
		<source src="downtown-los-angeles.webm">
		<track kind="chapters" label="Locations" src="downtown-los-angeles-locations.vtt" srclang="en" default onload="displayChapters(this)">                
	</video>
	<figcaption>
		<ol id="chapters">
		</ol>
	</figcaption>
</figure>

A more considerate approach would be to add this markup to the page via JavaScript if the browser supported HTML5 video and WebVTT. Since the majority of browsers now do both, I’ve chosen to place the markup directly on the page.

如果浏览器支持HTML5视频和WebVTT，则更体贴的方法是通过JavaScript将此标记添加到页面上。 由于大多数浏览器现在都可以做，所以我选择将标记直接放在页面上。

The ordered list in the markup will be filled with list items containing the chapter descriptions from the .vtt file, with the description for the current scene highlighted. We’ll need some CSS for that, together with declarations for displaying the video and UI:

标记中的排序列表将填充包含.vtt文件中章节描述的列表项，并突出显示当前场景的描述。 为此，我们需要一些CSS，以及用于显示视频和UI的声明：

figure {
	font-size: 0;
	position: relative;
	background: #000;
}
figure video {
	width: 75%;
	height: auto;
	display: inline-block;
}
figure figcaption {
	position: absolute;
	right: 0; top: 0;
	background: #222;
	width: 25%;
	font-size: .8rem;
	color: #666;
	height: 100%;
	overflow-y: scroll;
}
figure figcaption ol {
	position: relative;
	list-style-type: none;
	margin: 0; padding: 0;
}
figure figcaption ol li {
	padding: .7rem 1rem;
	border-bottom: 1px dashed #000;
	transition: .3s;
}
.current {
	background: hsl(45,80%,50%);
	color: #000;
}

Eventually I expect browsers to develop a native UI for dealing with chapter navigation, but none yet has this feature. Currently Chrome will indicate that a video with chapter information has closed captioning, but only display the captions as subtitles. So our first job will be to hide this display, then create the UI for handling chapters. This is done by adding a script at the bottom of the page in a single function, called when the .vtt file is loaded:

最终，我希望浏览器能够开发用于处理章节导航的本机UI，但尚无此功能。 目前，Chrome浏览器将指示带有章节信息的视频具有隐藏式字幕，但仅将字幕显示为字幕。 因此，我们的第一项工作是隐藏此显示，然后创建用于处理章节的UI。 这是通过在页面底部的单个函数中添加脚本来完成的， 该脚本在加载.vtt文件时调用：

function displayChapters(trackElement){
	if ((trackElement) && (textTrack = trackElement.track)){
		if (textTrack.kind === "chapters"){
			textTrack.mode = 'hidden';
			for (var i = 0; i < textTrack.cues.length; ++i) {
				cue = textTrack.cues[i],
				chapterName = cue.text,
				start = cue.startTime,
				newLocale = document.createElement("li");
				newLocale.setAttribute('id', start);
				var localeDescription = document.createTextNode(cue.text);
				newLocale.appendChild(localeDescription);
				locationList.insertBefore(newLocale);
				newLocale.addEventListener("click",
				function() {
					video.currentTime = this.id;
				},false);
			}
		textTrack.addEventListener("cuechange",
			function() {
				var currentLocation = this.activeCues[0].startTime;
				if (chapter = document.getElementById(currentLocation)) {
					var locations = [].slice.call(document.querySelectorAll("#chapters li"));
					for (var i = 0; i < locations.length; ++i) { 
						locations[i].classList.remove("current");
					}
					chapter.classList.add("current");
					locationList.style.top = "-"+chapter.parentNode.offsetTop+"px";
				}
			},false);
		}
	}
}

In order, the script does the following:

该脚本按顺序执行以下操作：

• Checks that the chapters file exists, and hides it in the browser. This is the presumptuous part, as IE doesn’t yet support the chapter display changes we’re about to make; all other modern browsers do, however.
  检查章节文件是否存在，并将其隐藏在浏览器中。 这是自欺欺人的部分，因为IE尚不支持我们将要进行的章节显示更改。 但是，所有其他现代浏览器都可以。

• Reads the cue times and descriptions from the file and adds them as list items to the page, with each list item taking the time mark of the scene it corresponds to as an id value.

  从文件中读取提示时间和描述，并将它们作为列表项添加到页面，每个列表项将其对应的场景的时间标记作为id值。

• Each of the items is supplied with a click event that will force the video to the matching time.
  每个项目都带有一个click事件，它将迫使视频达到匹配时间。

• WebVTT chapters includes the cuechange event, responding to the moment that a video has moved forward or backward through a cue’s time range. When this occurs, the cue that corresponds to the current time is highlighted.

  WebVTT的章节包括cuechange事件，以响应视频在提示的时间范围内前后移动的瞬间。 发生这种情况时，突出显示与当前时间相对应的提示。

• The current cue is moved to the top of the list.
  当前提示将移至列表顶部。

That’s the core of it: you can see more detail in the CodePen repo. The cues also highlight when playing or scrubbing through the video; by clicking on a description, you can also jump to any point.

这就是它的核心：您可以在CodePen repo中看到更多详细信息。 在播放或拖动视频时，提示也会突出显示。 通过单击描述，您也可以跳到任意点。

改进与结论 (Improvements & Conclusion)

I think that rich native web video is one of the most exciting features in HTML5: not only does it make video accessible (as the descriptions can be read by a screen reader for the blind) but it has the power to make video far more engaging. I see so many future uses for chapter tracks, from pop-up video captions that provide fun facts to truly deep links. It would be relatively easy to link each of the descriptions to further resources, for example, or to add geographical information in the .vtt file that could drive a live map on the page. I’ll explore those possibilities, and more, in future articles.

我认为丰富的本地网络视频是HTML5中最令人兴奋的功能之一：它不仅使视频可访问(因为盲人的屏幕阅读器可以读取描述)，而且还具有使视频更具吸引力的功能。 。 从提供有趣事实的弹出式视频字幕到真正的深层链接，我看到了章轨道的许多未来用途。 例如，将每个描述链接到其他资源或在.vtt文件中添加可在页面上显示实时地图的地理信息，将相对容易。 我将在以后的文章中探讨这些可能性，以及更多内容。

翻译自: https://thenewcode.com/977/Create-Interactive-HTML5-Video-with-WebVTT-Chapters

webvtt