ttml和webvtt_使用WebVTT可以访问和搜索在线视频

ttml和webvtt

WebVTT – Web Video Text Tracks, a standard previously known as WebSRT – is a time-indexed text file format referenced by browsers as cue information for HTML5 video or audio content. A WebVTT file frequently contains subtitles or captions, although there are many other possibilities.

WebVTT(Web视频文本轨道，以前称为WebSRT)是一种按时间索引的文本文件格式，浏览器将其用作HTML5视频或音频内容的提示信息。 WebVTT文件通常包含字幕或标题，尽管还有许多其他可能性。

In the example above, I’ve created a subtitle track for the award-winning short film Dark Side Of The Lens by Mickey Smith. All modern browsers, including IE10+ and Firefox 31+, support WebVTT, the only exception being Opera Mini.

在上面的示例中，我为米奇·史密斯(Mickey Smith)获奖的短片《镜头的黑暗面》(Dark Side Of The Lens)创建了字幕轨道。 所有现代的浏览器，包括IE10 +和Firefox 31+，都支持WebVTT，唯一的例外是Opera Mini。

While most assume that text tracks are solely for the deaf or foreign language translations, WebVTT has many more uses: descriptive tracks can be read by screen readers for the blind, and WebVTT metadata and chapter information can allow users to navigate easily through online video content just like DVDs and Blu-Ray. Add the fact that Google is already indexing closed captions to create more powerful and accurate searches for video, and writing WebVTT tracks for your HTML5 content becomes a no-brainer: the new format won’t even affect the performance of older browsers.

尽管大多数人认为文本轨道仅用于聋人或外语翻译，但WebVTT具有更多用途：屏幕阅读器可以为盲人阅读描述性轨道，WebVTT元数据和章节信息可以使用户轻松浏览在线视频内容就像DVD和Blu-Ray。 加上Google已经在对隐藏字幕进行索引以创建更强大，更准确的视频搜索这一事实，并且为HTML5内容编写WebVTT曲目变得轻而易举：新格式甚至不会影响旧版浏览器的性能。

WebVTT files are separate from the video or audio content that references them, meaning that subtitles are not "hard coded" into pixels. This also means that making and modifying .vtt files is very easy: any text editor can be used to create subtitle content, although I’d suggest employing one of the specialized tools I discuss in the next article.

WebVTT文件与引用它们的视频或音频内容是分开的，这意味着字幕不会“硬编码”为像素。 这也意味着制作和修改.vtt文件非常容易：任何文本编辑器均可用于创建字幕内容，尽管我建议使用下一篇文章中讨论的专用工具之一。

基本的WebVTT字幕语法 (Basic WebVTT Subtitle Syntax)

As its original name suggests, WebVTT is closely related to the .srt subtitle format you may already be familiar with. In this article, I’ll focus on creating basic subtitle tracks; future entries will discuss the many more options for .vtt files.

顾名思义，WebVTT与您可能已经熟悉的.srt字幕格式密切相关。 在本文中，我将重点介绍如何创建基本的字幕轨道。 以后的文章将讨论.vtt文件的更多选项。

A subtitle track has just a few requirements: it must start with a WEBVTT line, then be followed by cue points and associated subtitle information. For example, the dialogue track for Dark Side Of The Lens starts this way:

字幕轨道只有几个要求：它必须以WEBVTT行开头，然后是提示点和相关的字幕信息。 例如， “镜头暗面”的对话轨道以这种方式开始：

01:24.675
Life on the road is something 
I was raised to embrace. 
 
01:26.000 --> 01:29.725
Me Ma always encouraged us to
open our eyes and hearts to the world…
 
01:30.120 --> 01:34.040
…make up our own minds for 
experience and be inspired.

Time information is in the format hh:mm:ss.mmm (hours, minutes, seconds, milliseconds), with the hour counter optional.  The first timestamp in each line defines the moment the subtitle text appears; the second, when it vanishes.

时间信息的格式为hh:mm:ss.mmm (小时，分钟，秒，毫秒)，小时计数器是可选的。 每行的第一个时间戳定义了字幕文本出现的时间； 第二，它消失了。

Unlike HTML, WebVTT honors hard returns; breaks in a cuepoint means that the associated text will appear on separate lines. You can place also place optional cuepoint markers in front of each subtitle time. The completed subtitle track is saved as a UTF-8 encoded text file with a .vtt extension.

与HTML不同，WebVTT兑现了丰厚的回报； 提示点中的中断表示关联的文本将出现在单独的行中。 您还可以在每个字幕时间的前面放置可选的提示点标记。 完整的字幕轨道将保存为扩展名为.vtt的UTF-8编码文本文件 。

将字幕轨道添加到HTML5视频 (Adding Subtitle Tracks to HTML5 Video)

HTML5 has built-in support for WebVTT in the form of the <track> element, which is used inside the video or audio element to which the subtitles apply:

HTML5以<track>元素的形式内置了对WebVTT的支持，该元素在使用字幕的视频或音频元素中使用：

<video controls>
	<source src="dark-side-of-the-lens.webm" type="video/webm">
	<source src="dark-side-of-the-lens.mp4" type="video/mp4">
	<track label="English subtitles" kind="captions" srclang="en" src="dark-side-of-the-lens.vtt" default>
</video>

The syntax for <track> is fairly self-explanatory: the label attribute is optional, and its value user-defined. kind describes the information contained in the .vtt file: subtitles, captions, descriptions, chapters, or metadata. subtitles are considered translations of audio content for non-native speakers; captions are transcriptions of dialog, sound effects, musical cues and other audio designed to be read when the audio information cannot be heard (either because the user is hard of hearing, or due to the fact that the original audio is otherwise not clearly audible). srclang is the language used in the track, encoded in the same way languages are defined in HTML. The default attribute – which is currently required by some browsers in order to show any text information during playback – simply signifies that this track should be considered the default subtitle file.

<track>的语法非常不言自明： label属性是可选的，其值是用户定义的。 kind描述.vtt文件中包含的信息： subtitles ， captions ， descriptions ， chapters或metadata 。 subtitles被视为非母语人士的音频内容翻译； captions是对话的转录，音效，音乐提示和其他音频，旨在在无法听到音频信息时读取(由于用户听不清，或者由于原始音频不清晰而导致的事实) 。 srclang是轨道中使用的语言，其编码方式与HTML中定义语言的方式相同。 default属性(某些浏览器当前需要此属性，以便在播放过程中显示任何文本信息)仅表示应将该曲目视为默认字幕文件。

可选的Apache Config (Optional Apache Config)

The one concession you may need to make is to your site’s .htaccess file, as .vtt files may not be served as UTF-8. If that is the case, you could the following, assuming you were using Apache as a server:

您可能需要对站点的.htaccess文件进行一次让步，因为.vtt文件可能不会用作UTF-8。 如果是这样，假设您使用Apache作为服务器，则可以执行以下操作：

<FilesMatch \.vtt$>
	ForceType text/vtt;charset=utf-8
</FilesMatch>

Adding subtitle information to video and audio content is easy; creating and formatting that information is considerably more complex, and something I cover in the next article.

将字幕信息添加到视频和音频内容很容易； 创建和格式化该信息要复杂得多，这将在下一篇文章中介绍 。

翻译自: https://thenewcode.com/580/Make-Online-Video-Accessible-And-Searchable-With-WebVTT

ttml和webvtt