VideoJS-轨道-文本轨道

2019-04-03  本文已影响0人  JuanitaLee

原文
https://docs.videojs.com/tutorial-tracks.html
VideoJS当前有三种类型的轨道(tracks)：

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

文本轨道

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

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

关于远程文本轨道的注意事项
video.js所谓的“remote”文本轨道，是一个方便的术语，用于跟踪有关联的<track>元素，而不是那些不是<track>的元素。

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

创建文本文件(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的子元素。

<video
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
  <track kind="captions" src="//example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>

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

track属性

属性一kind

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

属性二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"。

<video class="video-js" crossorigin="anonymous">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <track src="//example.com/oceans.vtt" kind="captions" srclang="en" label="English">
</video>

有一点需要注意的是视频文件本身也需要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的开发者意味着什么呢？

上一篇下一篇

猜你喜欢

热点阅读