Today we’re releasing Video.js 4.0, which is the most solid, lightweight, and I dare say prettiest version yet. It’s available for download, on Github, and hosted for free on our CDN.

Version 4.0 received the most community collaboration of any previous version, which speaks to the growing strength of the JavaScript community, the growing popularity of HTML5 video, and an increase in Video.js usage. Over the last year the number of sites using Video.js has more than doubled, and each month there are over 200 million hits to the CDN-hosted version alone! Thank you to all of the Video.js community members for contributing code and filing bug reports.

This version is also a milestone in that it’s the first version released since Brightcove acquired Zencoder last year. For those who missed the announcement, it was a very good thing for Video.js. In the past, Video.js was a side project for Zencoder that I maintained on top of my regular responsibilities (as if startup life isn’t exciting enough). Post-acquisition, Brightcove has not only put me full-time on Video.js, but the Brightcove video player team has become contributors to the project. The Brightcove team is probably the most experienced video player team in the world, supporting the most advanced video technology, for the biggest brands, across all the devices. It’s been a privilege to work with them and they’ve made major contributions to this version.

4.0 Major Feature Summary:

Improved performance through an 18% size reduction using Google Closure Compiler in advanced mode

• Greater stability through an automated cross-browser/device test suite using TravisCI, Bunyip, and Browserstack.
• New plugin interface and plugin listing for extending Video.js
• New default skin design that uses font icons for greater customization
• Responsive design and retina display support
• Improved accessibility through better ARIA support
• Moved to Apache 2.0 license
• 100% JavaScript development tool set including Grunt

Improved Performance

With version 4.0, performance was our top priority, and a major factor of performance is the time it takes to load the library. What would seem to be minor size reductions can have a big impact, especially when a library will be loaded millions of times a month all over the world. We chose to use Google’s Closure Compiler because its “advanced mode” currently provides the most aggressive options for code minification, and so far we’ve seen an 18% reduction in code size, with the potential for more.

Closure Compiler also claims to rewrite code for better runtime performance, though we haven’t had a chance to benchmark this yet.

Some preliminary load-time benchmarking* shows:

• Player load times in under 50 milliseconds
• Playback start times in under 150 milliseconds
• Actual video playback seen in under 0.5 seconds (using a CDN hosted MP4)

*Initial tests used Chrome with an empty cache on a modern MacBook Pro with a Wi-Fi connection. More formal testing to follow.

Greater Stability

Automated cross-browser, cross-device testing is the Holy Grail of testing for a JavaScript library. While building version 4.0, we’ve been able to reach that goal through the use of a number of tools, including:

• TravisCI - Automatically runs unit tests through PhantomJS on every pull request made to the Video.js source code
• Bunyip + Browserstack - Allows us to run tests in cloud-hosted instances of any browser from IE6 to the latest Chrome, and also a wide range of iOS and Android devices.

This ability to easily run tests across environments before any new release will give us more protection against regressions, and can allow for a faster feature release cycle.

New Plugin Interface

The new plugins API allows developers to more easily add custom features to Video.js. The API works similarly to the jQuery plugin interface, giving developers access to add to or overwrite any piece of Video.js. Once a plugin has been created, it can be shared on the Video.js plugin list page on the wiki.

New Default Skin

With help from the Brightcove UX team, we’ve created a new default skin that’s simpler, more polished, and more customizable. One of the most interesting features is that we’ve moved from using images for icons to font icons. The use of font icons allows you to change the color and size of the icons simply by changing a CSS value. You can see an example of this on the Video.js homepage.

Improved Accessibility

Greg Kraus, a Video.js community member from NCSU.edu, did some great work testing and improving Video.js accessibility through better use of ARIA roles. The changes make it so keyboard-only users, screen reader users, and voice-interface users will be able to interact with the video player. UPDATE: Read more in Greg’s blog post.

Moved to Apache 2.0 License

Earlier versions of Video.js were released under the LGPLv3 license. LGPL often gets confused with its stricter sibling, GPL, which requires that all code the software touches must also be open source. Video.js is meant to be open and free to use in all contexts, and we want that to be clear, so version 4.0 is now released under Apache 2.0, the same license Twitter Bootstrap is released under.

100% JavaScript Tool Set

Previously Video.js used Ruby for development tools, including Rake for deployment tasks, and zenflow–an internal Zencoder tool that builds on gitflow for development process workflow. With 4.0 we’ve moved to Grunt for tasks and we’re building out a tool similar to zenflow in Node.js.

Videojs.com Now Open Source

As part of this release we’ve also made the Videojs.com website open source. So if you see something that should be added or fixed, fork it.

What now?

Even with all of the updates listed above, this is simply a jumping-off point for what will be an exciting year for Video.js. We’re continuing to improve performance, multi-platform stability, and customizability through plugins and skins. Members of the community have already started work on plugins for some of the more requested features, like playlists, analytics, and advertising.

Follow @videojs or sign up for our newsletter to stay up-to-date on new features and roadmap updates.

If you’d like to get involved in the project, check out our contributing guide.

Cheers,
-heff