Hooks

Hooks exist so that users can globally hook into certain Video.js lifecycle moments.

Table of Contents

Current Hooks

Currently, the following hooks are available:

beforesetup

beforesetup occurs just before a player is created. This allows:

  • Modification of the options passed to the Video.js function (e.g., videojs('some-id, options)).
  • Modification of the DOM video element that will be used for the player that will be created.

beforesetup hook functions should:

  • Take two arguments:
    1. videoEl: DOM <video> element that Video.js is going to use to create a player.
    2. options: The options object that Video.js was called with and will be passed to the player during creation.
  • Return an options object that will be merged with the originally provided options.

Example

  1. videojs.hook('beforesetup', function(videoEl, options) {
  3.   // videoEl will be the video element with id="some-id" since that
  4.   // gets passed to videojs() below. On subsequent calls, it will be
  5.   // different.
  7.   videoEl.className += ' some-super-class';
  9.   // autoplay will be true here, since we passed it as such.
  10.   if (options.autoplay) {
  11.     options.autoplay = false
  12.   }
  14.   // Options that are returned here will be merged with old options.
  15.   //
  16.   // In this example options will now be:
  17.   //   {autoplay: false, controls: true}
  18.   //
  19.   // This has the practical effect of always disabling autoplay no matter
  20.   // what options are passed to videojs().
  21.   return options;
  22. });
  24. // Create a new player.
  25. videojs('some-id', {autoplay: true, controls: true});

setup

setup occurs just after a player is created. This allows:

  • Plugins or other custom functionality to initialize on the player.
  • Changes to the player object itself.

setup hook functions:

  • Take one argument:
    1. player: the player that Video.js created
  • Don’t have to return anything

Example

  1. videojs.registerPlugin('foo', function() {
  3.   // This basic plugin will add the "some-super-class" class to a player.
  4.   this.addClass('some-super-class');
  5. });
  7. videojs.hook('setup', function(player) {
  9.   // Initialize the foo plugin after any player is created.
  10.   player.foo();
  11. });
  13. // Create a new player.
  14. videojs('some-id', {autoplay: true, controls: true});

Usage

Adding

Hooks can be added using videojs.hook(<name>, function) before running the videojs() function.

Example

  1. videojs.hook('beforesetup', function(videoEl, options) {
  2.   // This hook will be called twice. Once for "vid1" and once for "vid2".
  3.   // The options will match what is passed to videojs() for each of them.
  4. });
  6. videojs.hook('setup', function(player) {
  7.   // This hook will be called twice. Once for "vid1" and once for "vid2".
  8.   // The player value will be the player that is created for each element.
  9. });
  11. videojs('vid1', {autoplay: false});
  12. videojs('vid2', {autoplay: true});

After adding your hooks, they will automatically be run at the correct time in the Video.js lifecycle.

Adding Once

In some cases, you may only want your hook to run once. In these cases, use videojs.hookOnce(<name>, function) before running the videojs() function.

Example

  1. videojs.hookOnce('beforesetup', function(videoEl, options) {
  2.   // This hook will be called once for "vid1", but not for "vid2".
  3.   // The options will match what is passed to videojs().
  4. });
  6. videojs.hookOnce('setup', function(player) {
  7.   // This hook will be called once for "vid1", but not for "vid2".
  8.   // The player value will be the player that is created for each element.
  9. });
  11. videojs('vid1', {autoplay: false});
  12. videojs('vid2', {autoplay: true});

Getting

To access the array of functions that currently exists for any hook, use the videojs.hooks function.

Example

  1. // Get an array of all the 'beforesetup' hooks.
  2. var beforeSetupHooks = videojs.hooks('beforesetup');
  4. // Get an array of all the 'setup' hooks.
  5. var setupHooks = videojs.hooks('setup');

Removing

To stop hooks from being executed during any future Video.js lifecycles you can remove them using videojs.removeHook.

Example

  1. var beforeSetup = function(videoEl, options) {};
  3. // Add the hook.
  4. videojs.hook('beforesetup', beforeSetup);
  6. // Remove the same hook.
  7. videojs.removeHook('beforesetup', beforeSetup);