Notes on changes that are being made as version 5.0 is built. We can use this to inform blog posts and a migration guide.

With Video.js we were previously using Closure Compiler in advanced mode to achieve the smallest possible file size. However, what we found is this requires a lot of overhead and extra knowledge when writing the code that is unfriendly to project contributors, and that the mangled object properties create problems and confusion among developers building on the API (e.g. plugin developers). In 5.0 we're switching to UglifyJS and looking for additional size saving strategies that have less negative impact.

We're using Browserify with a Babelify transform.

We've switched to more standard file naming conventions.

video.js -> video.min.js

video.dev.js -> video.js

Player objects are now ready asynchronously. Previously, this was not always the case with non-Flash players. Going forward, it's best to pass a callback to a Player if you need to be sure it's ready:

var player = videojs('my-video');
player.ready(function() {
  // Do stuff with `player`...
});

video.js IE8 support has been moved into a separate script so that the modern browsers aren't required to include the legacy shims necessary to run on that platform. If you still require IE8 support, you can include the compatibility script in the head of your page:

<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.js"></script>

If a slider is specified as vertical, we'll now actually track Y-axis movement instead of requiring users to rotate with CSS.

The spacer component is simply an empty div that can be used to space elements in the control bar via CSS. This is especially useful since we're moving to a flexbox-based layout where a spacer set to auto width could be used to essentially "float" elements right.

Also in this change came a more specific CustomControlSpacer, which is going to be used as the default injection point for custom components in plugins.

The default for browsers is box-sizing: content-box, but border-box is more intuitive and easier to work with. We've switched to this for the player and all elements in the player.

The default skin has switched from displaying in an inline volume bar to a volume menu that displays on hover. The inline volume bar will still be created by default however, so you can hide the menu and display the inline version with CSS.

Previously, video.js Button component elements were <div> elements with role="button". They are now <button> elements.

Plugins are now initialized before other components are added (like the control bar), but after the player div has been created. For those coming from the 4.x world of plugins, this means plugins are initialized earlier than before, so to achieve the same functionality as before you'll need to wait for the ready event.

video.js now uses ES6 by way of Babel. Some of the more prominent uses of new features include:

• Modules
• Classes
• Arrow Functions
• let and const

There are more features of ES6 in use, but those are the big ones. If you wish to contribute to video.js - we hope you will! - you'll want to familiarize yourself with these concepts.

Going forward, subclassing should be done via ES6 classes or - if you are not developing in an ES6 environment - the videojs.extend() method.

Component.extend() previously supported constructor logic via an init() method. This is still supported, but the new style modeled on ES6 classes - the constructor() method - is not supported by Component.extend().

Also, videojs.extend() has deprecated support for an init() method to make the transition a little simpler, but the constructor() method is the preferred usage going forward.

When developing with ES6, use ES6 classes:

const VjsButton = videojs.getComponent('Button');
// internal to video.js you would use `import Button from 'button.js'`

class MyNewButton extends VjsButton {

  // An `init()` method CANNOT be used for constructor logic in ES6 classes!
  constructor(player, options) {
    super(player, options);
  } // notice, no comma
  
  otherFunc() {
    // do something
  }
}

When subclassing components (not using ES6), use the videojs.extend function:

var VjsButton = videojs.getComponent('Button');
var MyNewButton = videojs.extend(VjsButton, {

  // The `init()` method will also work for constructor logic here, but it is 
  // deprecated. If you provide an `init()` method, it will override the
  // `constructor()` method!
  constructor: function() {
    VjsButton.call(this, player, options);
  }, // notice the comma

  otherFunc: function() {
    // do something
  }
});

You no longer have access to the player in the constructor signature. Any events that you were triggering before can be triggered on the tech himself:

this.trigger('play');

You also have access to every option that you need:

• source
• playerId
• techId
• textTracks
• autoplay
• preload
• loop
• muted
• • anything specific to your tech

Finally, you no longer need to add the DOM element of your tech to the player. It will take care of itself using the return value of the createEl() function.

Major release may come more quickly now since we're not going to wait for big "press-worthy" changes.