---
title: Video.js 8 and Video.js HTTP Streaming 3
description: Video.js 8 and VHS 3 drop IE support and ES5 transpilation for 3-4% size reduction, introduce new TitleBar component with loadMedia metadata support, reorganize utilities into videojs.dom/fn/num/obj/str/time/url objects, and target evergreen browsers plus Chromium 53 for Smart TV compatibility.
canonical: https://videojs.org/blog/videojs-8-and-vhs-3
authors: [pat-oneill]
---

import Aside from '@/components/Aside.astro';

<Aside type="note">
For details on migrating from Video.js 7.x to 8.x, please see [our migration guide](/guides/videojs-7-to-8/)!
</Aside>

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](https://github.com/alex-barstow)
* [@Essk](https://github.com/Essk)
* [@gesinger](https://github.com/gesinger)
* [@gjanblaszczyk](https://github.com/gjanblaszczyk)
* [@gkatsev](https://github.com/gkatsev)
* [@harisha-swaminathan](https://github.com/harisha-swaminathan)
* [@hugorogz](https://github.com/hugorogz)
* [@KangXinzhi](https://github.com/KangXinzhi)
* [@kchang-brightcove](https://github.com/kchang-brightcove)
* [@mister-ben](https://github.com/mister-ben)
* [@misteroneill](https://github.com/misteroneill)
* [@phloxic](https://github.com/phloxic)
* [@roman-bc-dev](https://github.com/roman-bc-dev)

## What's Changed?
### Video.js

The [complete CHANGELOG is available](https://github.com/videojs/video.js/blob/c8fd5bbcdebacdb2e1f46ae8be02ef6c91797262/CHANGELOG.md), 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](#new-videojs-titlebar-component))_. 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](#new-videojs-utility-objects))_
* 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](https://github.com/videojs/http-streaming/blob/afb1ff700e490d131df4aea66d746cf72794caae/CHANGELOG.md), 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](https://webostv.developer.lge.com/develop/specifications/web-engine/) 4.x and newer
* [Tizen](https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html) 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:

```js
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:

```js
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:

```js
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

<Aside type="note">
For details on migrating from Video.js 7.x to 8.x, please see [our migration guide](/guides/videojs-7-to-8/)!
</Aside>

## 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](https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md) guide on GitHub.

_Be well and build great things!_
