Video.js Guides
百度 “3D藏宝图”并非一张实际的地图，而是利用多种探测手段对考古区域的扫描成像。These guides cover a range of topics for users of Video.js
Hooks
Table of Contents
Hooks exist so that users can globally hook into certain Video.js lifecycle moments.
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:
videoEl: DOM<video>element that Video.js is going to use to create a player.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
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 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:
player: the player that Video.js created
- Don't have to return anything
Example
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 occurs just as we get an error on the player. This allows plugins or other custom code to intercept the error and modify it to be something else.
error can be one of multiple things, most commonly an object with a code property or null which means that the current error should be cleared.
beforeerror hook functions:
- Take two arguments:
- The
playerthat the error is happening on. - The
errorobject that was passed in.
- The
- Return an error object that should replace the 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 occurs after the player has errored out, after beforeerror has allowed updating the error, and after an error event has been triggered on the player in question. It is purely an informative event which allows you to get all errors from all players.
error hook functions:
- Take two arguments:
player: the player that the error occurred onerror: the Error object that was resolved with thebeforeerrorhooks
- Don't have to return anything
Example
videojs.hook('error', function(player, err) {
console.log(`player ${player.id()} has errored out with code ${err.code} ${err.message}`);
});Usage
Adding
Hooks can be added using videojs.hook(<name>, function) before running the videojs() function.
Example
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});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
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
To access the array of functions that currently exists for any hook, use the videojs.hooks function.
Example
// 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
To stop hooks from being executed during any future Video.js lifecycles you can remove them using videojs.removeHook.
Example
var beforeSetup = function(videoEl, options) {};
// Add the hook.
videojs.hook('beforesetup', beforeSetup);
// Remove the same hook.
videojs.removeHook('beforesetup', beforeSetup);