Video.js v4.7.0 - Built mostly by NEW contributors! Also Google chooses Video.js
We’re continuing to work hard on improving the contributor experience around the Video.js project and it’s paying off. Over half of the changelog is thanks to brand new contributors! Issues and pull requests are getting addressed faster than ever, and I was even allowed to give a talk at OSCON on some of the strategies we’re using. If you’re instersted in getting involved, join the #videojs IRC room or post an issue to let us know.
Google Chooses Video.js for Google Media Framework
Google recently announced a new framework for building video experiences and monetization. There are versions of the framework for native iOS and Android apps, and for the browser they chose to use Video.js. Check out their video.js plugin, and as it says in their announcement, “Stay tuned as well for a deeper dive into Video.js with IMA soon!”
Localization
In this release we’ve built the infrastructure for displaying text in other languages. Examples of text include error messages and text used for accessibility. This feature can extend to plugins as well.
Today you can include other languages by including the JSON translations object from the language you want with the player, like in this example for Spanish (es).
videojs.options.languages['es'] = { [translations object] }
You can find translations files in the lang folder of the project. We don’t have many translations yet, but we’re looking for translators if you’d like to help!
Multiple buffered regions
With HTML5 video you can skip ahead in the video and the browser will start downloading the part of the file needed for the new position, which is different from how Flash video works by default. Flash will download from the start to the end of the file so you can only skip ahead once it has download that part of the video.
In the HTML5 video API we’re given the buffered
property which returns a list of time ranges that the browser has downloaded data for. Early on in HTML5 video, browsers only ever reported one time range, but now we have a direct view of what’s been downloaded.
In the newest version of the video.js skin you can see the specific regions.
We’ve kept it subtle so it’s not too big of a change. We’d love to hear your thoughts on it.
DASH Everywhere-ish
If you haven’t seen it yet, check out the post on Tom Johson’s work getting DASH supported in Video.js, using Flash or the new Media Source Extensions. MPEG-DASH is an adaptive streaming format that Netflix and YouTube are using to stream video to cutting-edge browsers. It has the potential to replace Apple’s HTTP Live Streaming format as the main format used for adaptive streaming.
Video.js on Conan!
Conan O'Brien’s TeamCoco site is using Video.js with a nicely customized skin and ads integration. Check it out!
New Skin by Cabin
The team at Cabin put together a simple and clean new skin for video.js.
New Plugins
A lot of great new plugins have been released!
- videojs-ima: Easily integrate the Google IMA SDK into Video.js to enable advertising on your video content.
- videojs-brightcoveAnyaltics: Allow tracking of views/impressions & engagement data in videojs for Brightcove videos
- videojs-logobrand: Add a logo/brand image to the player that appears/disappears with the controls. (also useful as a basic plugin template for learning how Video.JS plugins work.)
- videojs-seek: Seeks to a specific time point specified by a query string parameter.
- videojs-preroll: Simple preroll plugin that displays an advertisement before the main video
- videojs-framebyframe: Adds buttons for stepping through a video frame by frame
- videojs-loopbutton: Adds a loop button to the player
- videojs-ABdm: Use CommentCoreLibrary to show comments (which is called as DanMu) during playing.
- videojs-hotkeys: A plugin for Video.js that enables keyboard hotkeys when the player has focus.
New Release Schedule
As part of improving the contributor experience we’re moving to scheduled releases. We’ll now put out a release every other Tuesday as long as there’s new changes to release. This will help give everyone a better idea of when specific features and fixes will become available.
Full list from the change log
- Added cross-browser isArray for cross-frame support. fixes #1195 (view)
- Fixed support for webvtt chapters. Fixes #676. (view)
- Fixed issues around webvtt cue time parsing. Fixed #877, fixed #183. (view)
- Fixed an IE11 issue where clicking on the video wouldn’t show the controls (view)
- Added a composer.json for PHP packages (view)
- Exposed the vertical option for slider controls (view)
- Fixed an error when disposing a tech using manual timeupdates (view)
- Exported missing Player API methods (remainingTime, supportsFullScreen, enterFullWindow, exitFullWindow, preload) (view)
- Added a base for running saucelabs tests from grunt (view)
- Added additional browsers for saucelabs testing (view)
- Added support for listening to multiple events through a types array (view)
- Exported the vertical option for the volume slider (view)
- Fixed Component trigger function arguments and docs (view)
- Now copying all attributes from the original video tag to the generated video element (view)
- Added files to be ignored in the bower.json (view)
- Fixed an error that could happen if Flash was diposed before the ready callback was fired (view)
- The up and down arrows can now be used to control sliders in addition to left and right (view)
- Added a player.currentType() function to get the MIME type of the current source (view)
- Fixed a potential conflict with other event listener shims (view)
- Added support for multiple time ranges in the load progress bar (view)
- Added vjs-waiting and vjs-seeking css classnames and updated the spinner to use them (view)
- Now restoring the original video tag attributes on a tech change to support webkit-playsinline (view)
- Fixed an issue where the user was unable to scroll/zoom page if touching the video (view)
- Added “sliding” class for when slider is sliding to help with handle styling (view)
Cheers,
-heff