Video.js 指南

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

返回指南

钩子

当前钩子

目前，以下钩子可用

beforesetup

beforesetup 在播放器创建之前发生。这允许

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

beforesetup 钩子函数应

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

示例

videojs.hook('beforesetup', function(videoEl, options) {

  // videoEl will be the video element with id="some-id" since that
  // gets passed to videojs() below. On subsequent calls, it will be
  // different.

  videoEl.className += ' some-super-class';

  // autoplay will be true here, since we passed it as such.
  if (options.autoplay) {
    options.autoplay = false
  }

  // Options that are returned here will be merged with old options.
  //
  // In this example options will now be:
  //   {autoplay: false, controls: true}
  //
  // This has the practical effect of always disabling autoplay no matter
  // what options are passed to videojs().
  return options;
});

// Create a new player.
videojs('some-id', {autoplay: true, controls: true});

setup

setup 在播放器创建之后发生。这允许

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

setup 钩子函数

接受一个参数
1. player：Video.js 创建的播放器
无需返回任何内容

示例

videojs.registerPlugin('foo', function() {

  // This basic plugin will add the "some-super-class" class to a player.
  this.addClass('some-super-class');
});

videojs.hook('setup', function(player) {

  // Initialize the foo plugin after any player is created.
  player.foo();
});

// Create a new player.
videojs('some-id', {autoplay: true, controls: true});

beforeerror

beforeerror 在播放器发生错误时触发。这允许插件或其他自定义代码拦截错误并将其修改为其他内容。error 可以是多种类型之一，最常见的是一个带有 code 属性的对象，或者 null（表示应清除当前错误）。

beforeerror 钩子函数

接受两个参数
1. 发生错误的 player（播放器）。
2. 传入的 error 对象。
返回一个应替换当前错误的错误对象

示例

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 对象
无需返回任何内容

示例

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) 添加钩子。

示例

videojs.hook('beforesetup', function(videoEl, options) {
  // This hook will be called twice. Once for "vid1" and once for "vid2".
  // The options will match what is passed to videojs() for each of them.
});

videojs.hook('setup', function(player) {
  // This hook will be called twice. Once for "vid1" and once for "vid2".
  // The player value will be the player that is created for each element.
});

videojs('vid1', {autoplay: false});
videojs('vid2', {autoplay: true});

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

仅添加一次

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

示例

videojs.hookOnce('beforesetup', function(videoEl, options) {
  // This hook will be called once for "vid1", but not for "vid2".
  // The options will match what is passed to videojs().
});

videojs.hookOnce('setup', function(player) {
  // This hook will be called once for "vid1", but not for "vid2".
  // The player value will be the player that is created for each element.
});

videojs('vid1', {autoplay: false});
videojs('vid2', {autoplay: true});

获取

要访问任何钩子当前存在的函数数组，请使用 videojs.hooks 函数。

示例

// Get an array of all the 'beforesetup' hooks.
var beforeSetupHooks = videojs.hooks('beforesetup');

// Get an array of all the 'setup' hooks.
var setupHooks = videojs.hooks('setup');

移除

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

示例

var beforeSetup = function(videoEl, options) {};

// Add the hook.
videojs.hook('beforesetup', beforeSetup);

// Remove the same hook.
videojs.removeHook('beforesetup', beforeSetup);

Videojs.com