Video.js 指南

这些指南涵盖了 Video.js 用户的各种主题

视频轨道

注意: 虽然视频轨道是一项标准,但目前尚无兼容的实现。这是一项实验性技术!

视频轨道是 HTML5 视频的一项功能,用于向用户提供备用视频轨道,以便他们可以更改想要观看的视频类型。Video.js 提供了视频轨道的跨浏览器实现。

注意事项

  • 与文本轨道不同,无法通过 HTML 添加视频轨道。它们必须以编程方式添加。
  • Video.js 只存储轨道表示。视频轨道切换播放不由 Video.js 处理,并且必须在其他地方处理。

使用视频轨道

向播放器添加视频轨道

// Create a player.
var player = videojs('my-player');

// Create a track object.
var track = new videojs.VideoTrack({
  id: 'my-alternate-video-track',
  kind: 'commentary',
  label: 'Director\'s Commentary',
  language: 'en'
});

// Add the track to the player's video track list.
player.videoTracks().addTrack(track);

监听视频轨道启用事件

VideoTrackList 上的轨道被启用或禁用时,将触发一个 change 事件。您可以监听该事件并对其进行处理。

注意:初始的 VideoTrack 选择(通常是选择的主轨道)不应触发 change 事件。

// Get the current player's VideoTrackList object.
var videoTrackList = player.videoTracks();

// Listen to the "change" event.
videoTrackList.addEventListener('change', function() {

  // Log the currently enabled VideoTrack label.
  for (var i = 0; i < videoTrackList.length; i++) {
    var track = videoTrackList[i];

    if (track.enabled) {
      videojs.log(track.label);
      return;
    }
  }
});

从播放器中移除视频轨道

假设播放器已存在并包含您想要移除的视频轨道,您可以执行以下操作:

// Get the track we created in an earlier example.
var track = player.videoTracks().getTrackById('my-alternate-video-track');

// Remove it from the video track list.
player.videoTracks().removeTrack(track);

API

有关更完整的信息,请参阅Video.js API 文档,特别是:

  • Player#videoTracks
  • VideoTrackList
  • VideoTrack

videojs.VideoTrack

此类基于 VideoTrack 标准,可用于创建新的视频轨道对象。

下面列出的每个属性都可用作 VideoTrack 构造函数的选项。

id

标准定义

此轨道的唯一标识符。如果未提供,Video.js 将自动生成。

kind

标准定义

Video.js 支持 VideoTracks 的标准 kind 值:

  • "alternative":主轨道的备用选项。
  • "captions":带有内嵌字幕的主视频轨道。
  • "main":主视频轨道。
  • "sign":带有手语叠加层的主视频轨道。
  • "subtitles":带有内嵌副标题的主视频轨道。
  • "commentary":带有内嵌评论的主视频轨道。
  • "" (默认):没有明确的种类,或者轨道元数据中给出的种类未被用户代理识别。

label

标准定义

将向用户显示的轨道标签。例如,在列出可作为备用视频轨道使用的不同字幕的菜单中。

language

标准定义

视频轨道的有效 BCP 47 代码,例如 "en" 代表英语,"es" 代表西班牙语。

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

selected

标准定义

此轨道是否应该播放。每次只能选择一个视频轨道。