html5 video 文本轨道,VideoJS-轨道-文本轨道

下面我们依次来进行介绍这三种轨道

文本轨道

文本轨道用于显示字幕和标题，并添加用于在视频中的章节之间进行导航的菜单。

文本轨道是HTML5的一项功能，用于向终端用户(end-user)展示定时(time-triggered)文本。video.js提供了文本轨道的跨浏览器实现。

关于远程文本轨道的注意事项

video.js所谓的“remote”文本轨道，是一个方便的术语，用于跟踪有关联的元素，而不是那些不是的元素。

可以通过编程方式创建，但是由于远程文本轨道可以从播放器中删除，出于这个原因，我们建议只使用远程文本轨道。

创建文本文件(Text File)

定时文本要求是一个使用WebTT格式的文本文件，这种格式定义了一个“提示”列表，其中包含开始时间(start time)、结束时间(end time)和要显示的文本(text)。Microsoft提供一个可以帮助你开始使用这个文件的构建器。

注意：创建字幕时，还有其他的字幕格式化技术可以使字幕更加有意义，例如围绕音效的括号(e.g.[birds chirping]).

有关字幕的更深入的样式指南，请参阅Captioning Key，但是请记住并不是所有的功能都受WebTT或video.js WebVTT实现的支持。

将文本轨道(Text Tracks)添加到video.js

一旦你创建了你的WebTT文件，你可以使用track标签把他们添加到video元素中，与source元素相似，track元素同样被添加为video的子元素。

class="video-js"

controls

preload="auto"

width="640"

height="264"

data-setup='{}'>

video.js会动的从video元素中读取track元素，轨道(远程和非远程)也可以通过编程添加。

track属性

属性一kind

video.js支持以下轨道类型：

"subtitles"(默认) ，当音频可用但有无法理解视频中的对话的时候，subtitles将展示在视频上。

"captions",为聋/弱听者或视频静音时音译对话，音效，音乐暗示和其他音频信息。captions也展示在视频上。

"chapters"，用于在视频中创建导航的章节标题。通常，这些是以查看者可以用来浏览视频的章节列表的形式存在。

"descriptions",当视频部分不可用时或者由于观看者失明或未使用屏幕时，内容中的操作的文本描述。描述由屏幕阅读器读取或转换为单独的音轨。

"metadata",具有用于JavaScript解析和执行某些操作的数据的跟踪。这些不会显示给用户。

属性二label

用于在用户界面中使用的跟踪的简短描述文本。例如，在菜单中选择标题语言。

属性三default

布尔类型的default属性可以用来指定一个轨道的模式是否以(“showing”)作为开始。否则，用户需要从字幕或字幕菜单中选择他们的语言。

注意：对于 chapters，如果您想显示章节菜单，default是必需的。

属性四srclang

文本跟踪语言的有效BCP 47代码，例如"en"是英文或"es"是西班牙文。

有关支持的语言翻译，请参阅位于Video.js根目录中的语言文件夹(/ lang)文件夹，并参阅language以获取有关Video.js中语言的更多信息。

另一个域的文本轨道

由于Video.js通过JavaScript加载文本轨道文件，因此适用同源策略。如果您希望从一个域中提供播放器，但从另一个域提供文本路径，则需要在服务于文本轨道的服务器上enable CORS。

除了要允许跨域，您还需要将该crossorigin属性添加到video元素本身。该属性有两个可能的值"anonymous"和"use-credentials"。大多数用户会希望对跨域轨道(tracks)使用"anonymous"。

有一点需要注意的是视频文件本身也需要CORS头。这是因为一些浏览器将该crossorigin属性应用于视频源本身，而不仅仅是轨道。这被认为是该规范的安全问题。

使用文本轨道

用编程方式显示追踪

某些使用案例要求以编程方式打开和关闭字幕，而不是强制用户自己这样做。这可以通过修改文本轨道的mode属性来轻松实现。

该mode可以是三个值"disabled"，"hidden"和"showing"中的一个。当文本轨道mode是"disabled"，当视频正在播放时追踪不显示在屏幕上。

// Get all text tracks for the current player.

var tracks = player.textTracks();

for (var i = 0; i < tracks.length; i++) {

var track = tracks[i];

// Find the English captions track and mark it as "showing".

if (track.kind === 'captions' && track.language === 'en') {

track.mode = 'showing';

}

}

提示(cue)变得活跃时监听

其中mode一个支持的值是"hidden"。这意味着该追踪将在视频播放时更新，但观众无法看到。这对kind="metadata"的追踪最有用。

metadata文本追踪的一个常见用例是使用它们在提示变为活动状态时触发行为。为此，tracks会触发"cuechange"事件。

// Get all text tracks for the current player.

var tracks = player.textTracks();

var metadataTrack;

for (var i = 0; i < tracks.length; i++) {

var track = tracks[i];

// Find the metadata track that's labeled "ads".

if (track.kind === 'metadata' && track.label === 'ads') {

track.mode = 'hidden';

// Store it for usage outside of the loop.

metadataTrack = track;

}

}

// Add a listener for the "cuechange" event and start ad playback.

metadataTrack.addEventListener('cuechange', function() {

player.ads.startLinearAdMode();

});

模拟文本轨道

默认情况下，如果本机功能被破坏、不完整或不存在，Video.js将使用原生文本轨道并返回到模拟文本轨道。Flash技术将始终使用仿真的文本轨道功能。

video.js API和TextTrack对象是根据W3C规范建模的，Video.js使用Mozilla的vtt.js库来解析和显示模拟文本轨道。

为了禁用本机文本轨道功能和强制video.js总是使用模拟文本，nativeTextTracks该选项可以将传递给某项技术：

// Create a player, passing `nativeTextTracks: false` to the HTML5 tech.

var player = videojs('myvideo', {

html5: {

nativeTextTracks: false

}

});

文本轨道设置

当使用模拟文本轨道时，标题将在名为“Caption Settings”的菜单中增加一项。这允许用户改变屏幕上标题的样式。

可以通过关闭TextTrackSettings组件和隐藏菜单项来禁用此功能。

var player = videojs('myvideo', {

// Make the text track settings dialog not initialize.

textTrackSettings: false

});

/* Hide the captions settings item from the captions menu. */

.vjs-texttrack-settings {

display: none;

}

文本轨道优先级

通常来说，descriptions的优先级比captions和subtitles低，这对video.js的开发者意味着什么呢？

如果你使用default属性，video.js将标记为default的选为第一个轨道并将其打开。如果有多个轨道被标记为default，他将在"description"前打开第一个"captions" or "subtitles" 轨道.

这只应用于模拟的文本轨道支持，原生文本轨道行为将根据浏览器的不同而变化。

如果从菜单中选择了一个轨道，video.js将关闭所有其他相同类型的轨道。虽然这显示视频。虽然这表明Video.js支持"subtitles"和"captions"同时开启，但目前情况并非如此; Video.js只支持一次显示一个轨道。

这意味着对于模拟的文本轨道，Video.js将显示第一个启用的"subtitles"或"captions"轨道。

当支持原生文本轨道时，其他同类轨道仍将被禁用，但可能会显示多个文本轨道。

如果"descriptions"轨道被选中，"subtitles"或"captions"轨道也被选择，"descriptions"轨道将被禁用，并且他的菜单按钮也将被禁用。

以编程方式启用轨道时，Video.js会执行最少的强制执行。

对于模拟文本轨道，Video.js选择第一个轨道"showing"- 再次选择"subtitles"或"captions"而不是"descriptions"。

对于原生文本轨道，这种行为取决于浏览器。某些浏览器将允许多个文本轨道，但其他浏览器会在选择新轨道时禁用所有其他轨道。