使用方法
1.添加钩子函数
在调用videojs()之前，可以添加钩子函数，语法如下
videojs.hook(<name>, function)
例子:
videojs.hook('beforesetup', function(videoEl, options) {
});
videojs('vid1', {autoplay: false});
2.只执行一次钩子函数
有时候你希望你的钩子函数只执行一次，你可以在调用videojs()之前，调用videojs.hookOnce(<name>, function)
videojs.hookOnce('beforesetup', function(videoEl, options) {
});
3.获取钩子函数
videojs.hooks 可以获取播放器添加了那些钩子函数，返回的是一个函数数组
// Get an array of all the 'beforesetup' hooks.
var beforeSetupHooks = videojs.hooks('beforesetup');
4.删除钩子函数
你可以使用 videojs.removeHook 删除钩子函数
var beforeSetup = function(videoEl, options) {};
// Add the hook.
videojs.hook('beforesetup', beforeSetup);
// Remove the same hook.
videojs.removeHook('beforesetup', beforeSetup);
beforesetup
播放器被创建前会触发 beforesetup 函数。这时候你可以做两件事情
- 修改传给 video.js 的配置
- 修改 video 元素。
beforesetup 接收两个参数:
- videoEl: video元素
- options: video.js的配置
beforesetup 函数会返回一个对象配置，这个配置将会跟video.js原来的配置进行合并。
videojs.hook('beforesetup', function(videoEl, options) {
videoEl.className += ' some-super-class';
if (options.autoplay) {
options.autoplay = false
}
return options;
});
// Create a new player.
videojs('some-id', {autoplay: true, controls: true});
setup
播放器创建之后会调用setup，这时候你可以：
- 初始化插件或者启动功能
- 修改播放器对象
setup 接收一个参数 player ，player就是播放器，没有返回值。
videojs.registerPlugin('foo', function() {
this.addClass('some-super-class');
});
videojs.hook('setup', function(player) {
player.foo();
});
// Create a new player.
videojs('some-id', {autoplay: true, controls: true});
beforeerror
当播放器报错的时候，会触发beforeerror。这允许插件或者自定义的代码去拦截错误。错误有多种类型，最常见的就是code属性或者null对象。这意味着，我们应该处理这些错误。
beforeerror 接收两个参数
- palyer，播放器
- error，错误对象
返回一个错误对象，这个错误对象，会替代原来的错误对象
videojs.hook('beforeerror', function(player, err) {
const error = player.error();
if (err === null) {
return error;
}
return err;
});
error
当播放器发生错误后会触发error事件，error事件晚于beforeerror事件和其他被触发的错误事件。error事件包含包含播放器的所有错误。
error 接收2个参数：
- player，播放器
- error， beforeerror处理后的错误对象
error没有返回值
videojs.hook('error', function(player, err) {
console.log(`player ${player.id()} has errored out with code ${err.code} ${err.message}`);
});