5.0 Change Details

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.

Build-related

Removed object property mangling (Closure Compiler)

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.

Browserify / Babelify

We're using Browserify with a Babelify transform.

File naming

We've switched to more standard file naming conventions.

video.js -> video.min.js

video.dev.js -> video.js

Styles / DOM

Improved support for vertical sliders

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

Spacer component

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.

Switched to border-box sizing. See #2082

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.

Volume Menu is the new default. See #1553

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.

General Syntax

Switched to ES6 classes, updated how you subclass components

See #2035 and #2078. Component.extend() is being deprecated.

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 {
  constructor(player, options) {
    super(player, options);
  } // notice, no comma
  
  otherFunc() {
    // do something
  }
}

When externally subclassing components (not using ES6), you can use the videojs.extends function.

var VjsButton = videojs.getComponent('Button');
var MyNewButton = videojs.extends(VjsButton, {
  constructor: function() {
    VjsButton.call(this, player, options);
  }, // notice the comma
  otherFunc: function() {
    // do something
  }
});

Process related

Faster major releases

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