Hooks 钩子

钩子的存在使得用户可以全局地侵入 Video.js 生命周期的某些时刻。

当前可用的钩子

目前，以下钩子可用：

beforesetup

beforesetup 在创建播放器之前执行。它允许：

修改传递给 Video.js 方法的选项（例如，videojs('some-id', options)）。
修改将用于创建播放器的 video DOM 元素。

beforesetup 钩子函数应该：

接收两个参数：
1. videoEl: Video.js 用于创建播放器的 <video> DOM 元素。
2. options: 调用 Video.js 时使用的选项对象，将在创建过程中传递给播放器。
返回一个与最初提供的选项合并的选项对象。

Example

videojs.hook('beforesetup', function(videoEl, options) {
  // videoEl 是 id="some-id" 的 video 元素
  // 它将传递给下面的 videojs()
  // 在随后的调用中，情况将有所不同
  videoEl.className += ' some-super-class';
  // autoplay 将为 true，因此我们像这样通过
  if (options.autoplay) {
    options.autoplay = false
  }
  // 此处返回的选项将与旧选项合并
  //
  // 在本例中，选项现在为：
  //   {autoplay: false, controls: true}
  //
  // 这样实现的实际效果是，无论向 videojs() 传递什么选项，始终禁用 autoplay 
  return options;
});
// Create a new player.
videojs('some-id', {autoplay: true, controls: true});

setup

setup 在播放器创建后执行。它允许：

在播放器上初始化插件或其它自定义功能。
对播放器对象本身的更改。

setup 钩子函数：

接收一个参数
1. player：Video.js 创建的播放器
不需要返回任何东西

Example

videojs.registerPlugin('foo', function() {
  // 这个基本插件将向播放器添加类名 "some-super-class"
  this.addClass('some-super-class');
});
videojs.hook('setup', function(player) {
  // 在任意播放器创建后初始化 foo 插件
  player.foo();
});
// Create a new player.
videojs('some-id', {autoplay: true, controls: true});

beforeerror

beforeerror 在播放器获取到错误时执行。它允许插件或其它自定义代码拦截错误并修改为其它内容。error可以是多种情况之一，最常见的是带有 code 属性的对象或表示当前错误已被清除的 null。

beforeerror 钩子函数：

接收两个参数：
1. player：发生错误的播放器
2. error：传入的 error 对象
返回用于替换的 error 对象

Example

videojs.hook('beforeerror', function(player, err) {
  const error = player.error();
  // prevent current error from being cleared out
  if (err === null) {
    return error;
  }
  // but allow changing to a new error
  return err;
});

error

error 执行时机是，在播放器抛出错误之后，beforeerror 指定更新错误后，以及存在问题的播放器上的 error 事件触发后。这是一个纯信息事件，允许您从所有播放器获取所有的错误。

error 钩子函数：

接收两个参数：
1. player: 抛出错误的播放器
2. error: beforeerror 钩子返回的 Error 对象
不需要返回任何东西

Example

videojs.hook('error', function(player, err) {
  console.log(`player ${player.id()} has errored out with code ${err.code} ${err.message}`);
});

使用

添加

在运行 videojs() 方法之前，可以使用 videojs.hook(<name>, function) 添加钩子。

Example

videojs.hook('beforesetup', function(videoEl, options) {
  // 这个钩子将被调用两次。一次用于 "vid1"，一次用于 "vid2
  // options 将匹配传递给 vidoejs() 的每个选项
});
videojs.hook('setup', function(player) {
  // 这个钩子将被调用两次。一次用于 "vid1"，一次用于 "vid2
  // player 是每个元素创建的播放器
});
videojs('vid1', {autoplay: false});
videojs('vid2', {autoplay: true});

添加钩子后，它们将在 Video.js 生命周期中的正确时间自动运行。

添加一次

在某些情况下，您可能只希望钩子运行一次。在这些情况下，请在运行 videojs() 方法前使用 videojs.hookOnce(<name>, function)。

Example

videojs.hookOnce('beforesetup', function(videoEl, options) {
  // 这个钩子将为 "vid1" 调用一次，但不会为 "vid2" 调用
  // options 将匹配传递给 vidoejs() 的选项
});
videojs.hookOnce('setup', function(player) {
  // 这个钩子将为 "vid1" 调用一次，但不会为 "vid2" 调用
  // player 是每个元素创建的播放器
});
videojs('vid1', {autoplay: false});
videojs('vid2', {autoplay: true});

获取

要访问任意钩子当前存在的处理函数数组，请使用 videojs.hooks 方法。

Example

// 获取一个包含全部 `begoresetup` 钩子函数的数组
var beforeSetupHooks = videojs.hooks('beforesetup');
// 获取一个包含全部 `setup` 钩子函数的数组
var setupHooks = videojs.hooks('setup');

移除

要在任何未来的 Video.js 生命周期中停止执行钩子，您可以使用 videojs.removeHook 移除它们。

Example

var beforeSetup = function(videoEl, options) {};
// 添加钩子
videojs.hook('beforesetup', beforeSetup);
// 移除同一个钩子
videojs.removeHook('beforesetup', beforeSetup);