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

Asynchronous Player Readiness

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

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="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.js"></script>

Removals and Changes

Globals, Properties/Methods of videojs

4.x Name	5.0 Equivalent	Explanation
vjs	videojs	This alias for videojs was only available in the development version of VideoJS 4.x. It has been removed.
videojs.JSON	JSON	This alias for the JSON global was removed.
videojs.TOUCH_ENABLED	videojs.browser.TOUCH_ENABLED	This Boolean is still exposed, but usage is now deprecated.
videojs.round	N/A	This function has been removed. Use the native toFixed or your JavaScript library of choice.
videojs.trim	N/A	This function has been removed. Use the native trim or your JavaScript library of choice.
videojs.util	N/A	N/A
videojs.util.mergeOptions	videojs.mergeOptions	N/A

Classes in the videojs Namespace

4.x Name	5.0 Equivalent	Explanation
CoreObject	N/A	N/A
EventEmitter	EventTarget	This naming change more closely follows the DOM naming scheme.
MediaTechController	Tech	While MediaTechController is still available, use of the new name (Tech) is preferred.
SeekHandle	N/A	Handles are now implemented in CSS.
SliderHandle	N/A	Handles are now implemented in CSS.
VolumeHandle	N/A	Handles are now implemented in CSS.

Properties/Methods/Events of the videojs.Component Class

4.x Name	5.0 Equivalent	Explanation
createEl()	createEl()	The second argument was used for properties AND attributes, but now there is a third argument specifically for attributes.
extend()	videojs.extend()	See note below.
options()	options_	Should only be used within a component!

Properties/Methods/Events of the videojs.Player Class

4.x Name	5.0 Equivalent	Explanation
cancelFullScreen	cancelFullscreen	This previous naming was deprecated in 4.x and removed for 5.0.
isFullScreen	isFullscreen	This previous naming was deprecated in 4.x and removed for 5.0.
requestFullScreen	requestFullscreen	This previous naming was deprecated in 4.x and removed for 5.0.
getTagSettings	Player.getTagSettings or player.constructor.getTagSettings	This method was previously available on Player instances, but is now a static method on the Player class.
onDurationChange	handleTechDurationChange	N/A
onEnded	handleTechEnded	N/A
onError	handleTechError	N/A
onFirstPlay	handleTechFirstPlay	N/A
onFullscreenChange	handleFullscreenChange / handleTechFullscreenChange	N/A
onLoadStart	handleTechLoadStart	N/A
onLoadedAllData	handleLoadedAllData	N/A
onLoadedMetaData	handleTechLoadedMetaData	N/A
onLoadedData	handleTechLoadedData	N/A
onPause	handleTechPause	N/A
onPlay	handleTechPlay	N/A
onProgress	handleTechProgress	N/A
onSeeked	handleTechSeeked	N/A
onSeeking	handleTechSeeking	N/A
onTimeUpdate	handleTechTimeUpdate	N/A
onVolumeChange	handleTechVolumeChange	N/A
onWaitEnd	N/A	N/A
onWaiting	handleTechWaiting	N/A

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.

BUTTONs instead of DIVs

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

Selector Changes

4.x Name	5.0 Equivalent
.vjs-live-controls	.vjs-live-control
.vjs-time-controls	.vjs-time-control

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.

Switching to ES6

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.

Subclassing Components

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

Summary

Subclass Method	Deprecated?	Supports init()?	Supports constructor()?
class Foo extends Component	x	x	√
videojs.extend()	x	√	√
Component.extend()	√	√	x

Deprecation Notes

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.

VideoJS 5.0 Subclassing Examples

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

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.