video.js插件使用参考_video插件

 1.video.js插件

    一个基本的插件是一个普通的 JavaScript函数:

function examplePlugin(options) {
 
  if (options.customClass) {
    this.addClass(options.customClass);
  }
 
  this.on('playing', function() {
    videojs.log('playback began!');
  });
}

或编辑高级插件

const Plugin = videojs.getPlugin('plugin');
 
class ExamplePlugin extends Plugin {
 
  constructor(player, options) {
    super(player, options);
 
    if (options.customClass) {
      player.addClass(options.customClass);
    }
 
    player.on('playing', function() {
      videojs.log('playback began!');
    });
  }
}

按照惯例，插件会传递一个 options 对象；但是，实际上，你可以接受任何你想要的参数。这个示例插件将添加一个自定义类（无论传入的是 options.customClass），并且每当开始播放时，它都会将消息记录到浏览器控制台。

注意:插件函数中 this 的值是 Player 实例；因此，你可以访问其完整的 API。

注册基本插件

现在我们有了一个函数，可以对播放器进行一些操作，剩下的就是用 video.js 注册插件:

videojs.registerPlugin('examplePlugin', examplePlugin); 

videojs('my-player', { plugins: { examplePlugin: {} });

 在此之后，任何玩家都将自动在其原型上拥有 examplePlugin 方法！

注意:插件名称的唯一规定是，它不能与任何现有的插件或播放器方法冲突。 

高级插件与基本插件有两个关键区别，在描述其高级特性之前，理解这两个区别非常重要。

this值

对于基本插件，插件函数中 this 的值将是播放器。

对于高级插件，this 的值是 Plugin 类的实例。播放器将作为其第一个参数传递给插件构造函数（并作为 player 属性自动应用到插件实例），在此之后将传递任何其他参数。

播放器插件属性

基本插件和高级插件都是通过调用与插件名称匹配的播放器上的方法来设置的（例如 player.examplePlugin()）。

然而，对于高级插件，这种方法就像工厂函数，它被一个新的函数替换，该新的函数返回插件实例:

// `examplePlugin` has not been called, so it is a factory function.
player.examplePlugin();
 
// `examplePlugin` is now a function that returns the same instance of
// `ExamplePlugin` that was generated by the previous call.
player.examplePlugin().someMethodName();

对于基本的插件，方法不会改变——它始终是相同的函数。基本插件的作者有责任处理对其插件的多次调用函数。 

videojs下载功能插件

npm i videojs-vjsdownload

var player = videojs(document.querySelector('.video-js'), {
  plugins: {
    vjsdownload:{
      beforeElement: 'playbackRateMenuButton',
      textControl: 'Download video',
      name: 'downloadButton',
      downloadURL: 'https://video_url.mp4' //optional if you need a different download url than the source
    }
  }
} , function() {
  console.log('Callback video-js initiated');
  this.on('downloadvideo', function(){
    console.log('downloadvideo triggered');
  });
});

Options

• beforeElement: name of the player.controlBar component for the button to be attached before

• default: fullscreenMenuToggle

• textControl: String for the controlText

• default: 'Download Video'

• name: name of the DownloadButton component

• default: 'downloadButton'