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

API Changes

IE8 Support

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="https://cdn.rawgit.com/videojs/ie8/master/dist/videojs-ie8.min.js"></script>

Removed Methods

• videojs.bind: Deprecated in favor of Function.prototype.bind.

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.

Plugins

Initialization

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.

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
  }
});

Fat Arrows

In a few cases, we might also use fat arrow functions. These functions bind the local scope and do not allow rebinding it via bind, call or apply. They can be written in a few ways:

// if you have no arguments and return a simple expression
var five = () => 5;
five(); // => 5

// if you have multiple statements or expressions, you add a block around it and also you need to add the `return` operator back in
var addFive = (a) => {
  return a.map((i) => i + 5);
};

See babel's docs for some more info.

Tech related

Uncoupled from the player

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.

Process related

Faster major releases

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