hooks(钩子)

钩子的存在是为了让用户可以全局地钩子到特定的Video.js生命周期时刻。


现有的钩子

目前,有以下钩子可供使用:

beforesetup

beforesetup在创建播放器之前触发:

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

在安装之前,钩子函数应该:

  • 有两个参数:
    • videoEl<video>将用于Video.js创建播放器的DOM 元素。
    • options:与Video.js一起调用的options对象,并将在创建过程中传递给播放器。
  • 返回一个选项对象,该对象将与原始提供的选项合并。

例子

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 钩子函数:
  • 一个参数:
    • 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});


Usage

Adding

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

例子

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生命周期中正确的时间自动运行。


Adding Once

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

例子

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});


Getting

要访问任何钩子当前存在的函数数组,请使用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');


Removing

为了阻止钩子在任何未来的Video.js生命周期中被执行,你可以使用videojs.removeHook来删除它们。

例子

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

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

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


上一篇:faq(常见问题) 下一篇:languages(语言)