#videojs

Today we're releasing our first official 5.0 release candidate. We're really excited to get this into the wild, but a lot has changed under hood. It should be stable for normal usage, but we've got a limited number of test devices (and testers for that matter), so what we need now is for people to bang on 5.0 and let us know what breaks!

You can either grab the master branch from Github and run grunt to create your own build, or we'll push each new release candidate to the CDN. We're going to be moving quickly and pushing new candidates when we uncover / fix bugs, so be sure to check for new versions! As of this post, the newest release is 5.0-rc.2. If you'd like to see a demo, we've got one up on JSBin.

What's different?

New Base Theme

The most obvious difference you'll see when you load up the release candidate is most likely going to be the new base theme. We've worked hard to simplify the theme and make it possible to do as much as possible with purely CSS.

There are elements in the control bar that aren't shown by default, but can be by simply overriding a little CSS. For example, if you'd rather use an inline volume control instead of the popup menu, you could make these changes:

.video-js .vjs-volume-menu-button { display: none; } .video-js .vjs-mute-control, .video-js .vjs-volume-control { display: flex; }

This just hides the .vjs-volume-menu-button control, and unhides the mute control / inline volume control. Other things that are available but hidden by default are a time divider (.vjs-time-devider), total duration (.vjs-duration), and a spacer (.vjs-custom-control-spacer).

ES6

Thanks to the incredible Babel project, we're able to write ES2015 and have it transpiled to ES5. It's fantastic, and means we get glorious things such as string interpolation, so reading our codebase `just got a whole lot ${_.sample(['better', 'awesomer', 'more fantastic', 'less plus-y'])}`.

On our Wiki we have a page devoted to ES6 features we use extensively. There are probably a few little things missing, but if you familiarize yourself with those features you should feel comfortable reading the Video.js source.

We're also using Browserify (with a Babelify transform), so now we're able to take advantage of all the browser packages NPM has to offer. One big area this has allowed us to improve is utility functions, which are now provided by Lodash.

Plugins

Plugins are initialized earlier than before, giving plugin developers even more control over the player experience. They're now initialized before other components are added (like the control bar), but after the player div is created. Keep in mind you'll now need to wait for the ready event to do things such as append items to the control bar.

The plugin-development world should have also gotten more predictable since we've gotten a little less aggressive with our minification. Keep in mind that when you want to subclass a component externally (not using ES2015), you'll want to use videojs.extends.

You can find more information on our 5.0 change details wiki page.

Want to be helpful?

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css).

Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions.