Pat O'Neill2022-08-22Video.js 8 and Video.js HTTP Streaming 3
NOTE: For details on migrating from Video.js 7.x to 8.x, please see our migration guide!
We are very excited to announce that Video.js 8.0 and Video.js HTTP Streaming (VHS) 3.0 are available!
While these releases are constituted of a lot of housecleaning tasks, there are some changes of interest to users of the Video.js platform.
Contributors
Before we dive into the software changes, open source doesn't work without people. Huge thanks to everyone who contributed pull requests to these releases!
- @alex-barstow
- @Essk
- @gesinger
- @gjanblaszczyk
- @gkatsev
- @harisha-swaminathan
- @hugorogz
- @KangXinzhi
- @kchang-brightcove
- @mister-ben
- @misteroneill
- @phloxic
- @roman-bc-dev
What's Changed?
Video.js
The complete CHANGELOG is available, but here are some highlights:
- No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer
- Updated to VHS 3.0
- Enabled the
sourcesetevent by default,enableSourceset: falsecan be used to turn this off. - Added new
TitleBarcomponent, which is not visible in the UI by default (see below for details). As a result, we moved theBigPlayButtoncomponent to the center of the player by default addClassandremoveClassmethods can now be given multiple class names- Clicking the playback rate button now opens the menu rather than changing the playback rate
- Deprecated many old top-level utility methods in favor of utility methods stored on objects (see below for details)
- Invalid event types will now throw errors instead of log warnings
- Change
addRemoteTextTrack'smanualCleanupoption to default tofalse - Removed the
videojs.extend()function - Removed the
firstplayevent - Removed the
retryOnErroroption and made this behavior the default - Removed the ability to set
aria-*,role, andtypeattributes via thepropsargument ofcreateElmethods - Removed remaining references and logic related to Flash and SWF
- Remove fallbacks for missing flexbox support
- Removed IE-specific code
Overall, the minfied and gzipped size of Video.js is reduced by around 3%. We will continue to look for ways to optimize the size of Video.js.
VHS
The complete CHANGELOG is available, but here are some highlights:
- No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer.
- Naming changes for more inclusive language (e.g. "master" becomes "main", "blacklist" becomes "exclude", "whitelist" becomes "include").
- Skip detected gaps immediately instead of waiting the duration of the gap before skipping.
- Removed the deprecated
smoothQualityChangemethod. - Improved behavior when encountering
output-restrictedevent handling. - Cleaned up parameters of
excludePlaylist.
Overall, the minfied and gzipped size of VHS is reduced by around 4%. We will continue to look for ways to optimize the size of VHS.
Browser/Device Support
With these releases, our new browser/device targets are generally focused on the last 3 major versions of so-called "evergreen" browsers:
- Chrome
- Firefox
- Safari
- Edge (Chromium, not Legacy)
However, with Video.js being used in more contexts than just desktop and mobile web, like Smart TVs or OTT devices, we have an additional minimum support threshold for Chromium-based browsers version 53 and newer. This grants support for:
New Video.js TitleBar Component
The new TitleBar component will show a UI element across the top of the player which displays the title and/or description of the current media in the player. The TitleBar will not show if no title or description is provided.
Using loadMedia to Populate the TitleBar
The easiest way to provide a title and/or description is to use your player's loadMedia method:
player.loadMedia({
artist: 'Disney',
album: 'Oceans',
title: 'Oceans',
description: 'Journey in to the depths ... and race with dolphins at play.',
poster: 'https://vjs.zencdn.net/v/oceans.png',
src: [{
src: 'https://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}, {
src: 'https://vjs.zencdn.net/v/oceans.webm',
type: 'video/webm'
}]
})If you're not familiar with the loadMedia method, it's a way to provide additional metadata for your media beyond what is available through the src method alone. As you see in the above example, the title and description are provided and will be used to populate the title bar.
Populating the TitleBar Directly
The TitleBar can also be populated through direct input using the component's update method:
player.titleBar.update({
title: 'Oceans',
description: 'Journey in to the depths ... and race with dolphins at play.'
});The title and/or description can be removed by passing an empty string for one or both of these values:
player.titleBar.update({
title: '',
description: ''
});If both are removed, the TitleBar will no longer be visible.
New Video.js Utility Objects
Over time, the videojs namespace has become cluttered with a wide variety of utility functions. One of the changes we are introducing is a more deliberately designed interface for these utility functions.
The guiding principle here was that if a function didn't feel like a core part of the library, but was still potentially useful to plugins and other integrations, we exposed it as part of a utility object instead of a top-level function.
These are the utility objects attached to videojs in 8.0.0:
| Object | Description |
|---|---|
videojs.browser | Various user-agent detection values (available previously) |
videojs.dom | DOM functions (available previously) |
videojs.fn | Function... functions |
videojs.num | Number functions |
videojs.obj | Object functions |
videojs.str | String functions |
videojs.time | Time-related functions |
videojs.url | URL-related functions |
NOTE: For details on migrating from Video.js 7.x to 8.x, please see our migration guide!
Conclusion
Thanks again to all our contributors and to the large community of developers who support Video.js by using it every day!
If you'd like to contribute to Video.js, the place to start is our CONTRIBUTING guide on GitHub.
Be well and build great things!
