This guide describes backward incompatible changes made between Video.js 7 and Video.js 8 and how to migrate your implementation, if needed.

IE11 Support

Video.js 8 removes support for IE11. Attempting to use Video.js 8 in IE11 will cause errors to be thrown. There is no migration path here; so, if you must have IE11 support, use an older version of Video.js.

Removals

videojs.extend()

The videojs.extend() function is removed from Video.js 8.

Video.js now uses native ES6 classes internally and the extend() function only worked with plain function prototypes. It did not work with ES6 classes, so it has been removed.

At the most basic level, the old way to create a component using extend() was:

const Component = videojs.getComponent('Component');

const MyComponent = videojs.extend(Component, {
  constructor: function(player, options) {
    Component.call(this, player, options);
  }
});

videojs.registerComponent('MyComponent', MyComponent);

Going forward, only ES6 classes are supported. The equivalent would be:

const Component = videojs.getComponent('Component');

class MyComponent extends Component {
  constructor(player, options) {
    super(player, options);
  }
}

videojs.registerComponent('MyComponent', MyComponent);

NOTE: It should also be mentioned that native classes that have been already transpiled will not work with native extend! For example, current plugin build tools will transpile classes into plain constructor functions, which cannot be extended.

firstplay Event

The firstplay event was removed from Video.js 8.

Instead of listening for the firstplay event, use one() to bind a callback to the first occurrence of the play event, like this:

player.ready(() => {
  player.one('play', callback);
});

Setting ARIA Attributes as Properties

In previous versions of Video.js, you could call the various flavors of createEl() with both DOM properties and attribute names in its second argument.

While there is a one-to-one mapping of properties to attributes in most cases, setting ARIA attribute names (i.e. aria-label vs. ariaLabel) through this mechanism is no longer supported:

// NO LONGER SUPPORTED!!!
videojs.dom.createEl('div', {id: 'example', 'aria-label': 'My Label'});

Attempting to set these types of attributes in the second argument of createEl() functions will still set properties of those names on the DOM object, but they will not set attributes or the standard DOM properties.

Instead, these must be set using the third argument, like this:

videojs.dom.createEl('div', {id: 'example'}, {'aria-label': 'My Label'});

Alternatively, ARIA attributes can be set in their property name form:

videojs.dom.createEl('div', {id: 'example', ariaLabel: 'My Label'});

Deprecations

Many functions were deprecated in Video.js 8 (or earlier). Below are lists of those functions.

Newly Deprecated Functions

These functions are newly deprecated in Video.js 8, but should be replaced to suppress deprecation warnings and prepare for Video.js 9.

Each of these functions will log a deprecation warning the first time they are used... but only the first time so as not to be too noisy!

These deprecated functions will be removed in Video.js 9.0!

Older Deprecated Functions

There are still a number of older functions that remain usable, but deprecated:

These deprecated functions will be removed in Video.js 9.0!