Skip to content

Instantly share code, notes, and snippets.

@gkatsev
Created September 29, 2015 05:57
Show Gist options
  • Save gkatsev/765ca395e6772ac97db7 to your computer and use it in GitHub Desktop.
Save gkatsev/765ca395e6772ac97db7 to your computer and use it in GitHub Desktop.

Plugins

Plugins mostly have not changed from how they worked in Videojs 4.x. You still register and use them the same way. The only major change is that if you are instantiating a plugin inside the config of a player, this plugin will get run before the player is ready. This is so that if plugins are doing some UI work or adding themselves as children of the player they can do so early on. This means that plugins that require the player to be ready would need to handle that themselves or else not support instantiation via the player config. Ex:

videojs('my-video', {
  plugins: {
    playlists: {}
  }
});

As part of the update to videojs 5 and our switch from Google's Closure Compiler to Uglify, we've been focusing on making the plugin experience better. We've made sure to export some of the utility functions that we use inside our own codebase to make writing plugins easier. This way plugins don't need to include extra code themselves if a function, merge, for example, is available from videojs.

Also, we're encouraging plugin authors to publish publish their plugins on npm. If the plugins are tagged with videojs-plugin, they'll show up on our spiffy new plugins listing page. (UPDATE THIS LINK)

End-User of VideoJS

As stated earlier, we spent a lot of time modularizing the codebase and intergrating it with browserify. This should make it easier for end-users of videojs, especially if they use browserify themselves. With this change, users can just require('video.js') in their app.js or whenever they need it to instantiate players. In addition, plugins that were written using browserify themselves can be added very easily using browserify and require as well. Of course, you can use Babel and ES6 modules as well. For example, your app.js could look like the following, assuming browserify and babel for ES6 syntax:

// import videojs
import videojs from 'video.js';
// import several plugins. Each requires videojs itself and registers itself accordingly.
import 'videojs-playlist';
import 'videojs-thumbnail';
import 'videojs-contrib-hls'; // this isn't ready yet, unfortunately

// make a player
let player = videojs('my-video');
// initialize some plugins
player.playlist(myplaylist);
player.thumbnail(myThumbnailConfig);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment