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 sourceset event by default, enableSourceset: false can be used to turn this off.
• Added new TitleBar component, which is not visible in the UI by default (see below for details). As a result, we moved the BigPlayButton component to the center of the player by default
• addClass and removeClass methods 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's manualCleanup option to default to false
• Removed the videojs.extend() function
• Removed the firstplay event
• Removed the retryOnError option and made this behavior the default
• Removed the ability to set aria-*, role, and type attributes via the props argument of createEl methods
• 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 smoothQualityChange method.
• Improved behavior when encountering output-restricted event 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:

• webOS TV 4.x and newer
• Tizen 2018 models and newer

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:

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!