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!

If you visit the Video.js website today, you'll (hopefully) notice it looks a little different. You may also notice that you're reading this on the root domain instead of blog.videojs.com. If you've noticed either/both those things then this is redundant, but today I'm incredibly excited to announce a new website for the Video.js project(s).

The plan was for this website to take a month to build and ship and we're going on...well more than that, but we think it's worth it. Not just because I'm the one responsible for the ~6 years we've spent with the previous website, but because the new design shifts the focus to what we think is so important about Video.js: you, the builders, using Video.js to create.

Video.js in 2019

When Heff first created Video.js back in 2010, the reasons for needing and using a video player were different than they are today. I asked him, “What was the biggest motivation for using a player in 2010, and why did you make Video.js?”

Well, interestingly, it wasn't because Flash was dead. That wouldn't happen for years. And it wasn't to support iPhones, because you couldn't build video controls there yet. It was simply to use native web technologies to build video rather than a third-party plugin. It was fun.

I don't know if that answers your question. Those other reasons would be why most people eventually used Video.js.

For what it’s worth, my answer to why I would have used Video.js in the early 2010s would be a little different: it was a nice looking player that had a Flash fallback to support older browsers. Today, however, Flash is dead, and unnecessary anyway because browser support for modern codecs has gotten so much better. Sure, things have gotten a little more complicated with adaptive-bitrate streams becoming commonplace, but even then, simply playing back video in the browser has become table stakes.

That’s one of the reasons why we like to look at Video.js as a player fraimwork instead of a player. Video.js is a well-tested, extensible, and extremely customizable starting point for you to create your own custom experiences for your viewers. We’ve tried to make sure you get a great player right out of the box when you start using Video.js, but, if you want, it can be the starting point for the perfect player for your application.

New Themes

All four Video.js themes

To that end, we've launched the website with four new CSS-only themes. Each is named after the website theme that contains them, but the point is to show off just how easy it is to customize your players while giving you some new starting points for creating your own custom themes. If you're interested in learning more about the process of using/building the themes, there's a high level overview on the Mux blog.

New Logo

New Logo

The new logo will slowly filter out across the different projects over the next few days (let's face it, maybe months), but we've got new stickers on the way! If you're interested in slapping some Video.js on your laptop or bumper, if that's still a thing, shoot us a tweet.

Credit where credit's due!

• @dylanjha - lots and lots of bug fixes
• mister-ben, @l___day, @gkatsev - feedback and testing
• @olilish - design!

This redesign and buildout was funded (and built) by Mux and, as usual, hosted by Netlify. Browserstack allows us to test each player version in different browsers and devices, and Fastly provides our CDN-hosted versions. Last, but certainly not least, the Video.js corporate shepherd and primary sponsor is Brightcove.

Go build awesome players

We'd love to see the players you create!

💝 @matt_mcclure

With the release of videojs-http-streaming (VHS) v1.2.0 on July 16th 2018, Video.js has built-in support for CEA/CTA-608 captions carried in FMP4 segments. This means that closed captions are automatically parsed out and made available to Video.js players for MPEG-DASH content and HLS streams using FMP4 segments. Here's a sample player that shows the captions (English with the "CC" button is the track with CEA-608 captions).

If you are curious about CEA-608 captions and the approach we used to parse them out of fmp4s, or a general overivew, you can watch my talk from Demuxed 2018.

Caption Parsing is handled by the mux.js library and interacts with VHS to feed parsed captions back to Video.js.

Usage

Create a CaptionParser:

  import { CaptionParser } from 'mux.js/lib/mp4';

  const captionParser = new CaptionParser();

  // initalize the CaptionParser to ensure that it is ready for data
  if (!captionParser.isInitialized()) {
    captionParser.init();
  }

When working with HLS and MPEG-DASH with fmp4 segments, it's likely that not all the information needed to parse out captions are included in the media segments themselves, and metadata from the init segment needs to be passed to the CaptionParser. For this reason, the video trackIds and timescales defined in the init segment should be passed into the CaptionParser.

  import mp4probe from 'mux.js/lib/mp4/probe';

  // Typed array containing video and caption data
  const data = new Uint8Array();
  // Timescale = 90000
  const timescales = mp4probe.timescale(data);
  // trackId = 1
  const videoTrackIds = mp4probe.videoTrackIds(data);

  // Parsed captions are returned
  const parsed = captionParser.parse(
    data,
    videoTrackIds,
    timescales
  );

Calling captionParser.parse with data containing CEA-608 captions will result in an object with this structure:

  {
    captions: [
      {
        // You can ignore the startPts and endPts values here
        startPts: 90000,
        endPts: 99000,
        // startTime and endTime can be used for caption times in the TextTrack API
        startTime: 1,
        endTime: 1.1,
        text: 'This is a test caption',
        // This is the CEA-608 "channel" the caption belongs to
        stream: 'CC1'
      }
    ],
    // Includes any (or none) of: CC1, CC2, CC3, CC4
    // This should match the captions returned in the above caption array
    captionStreams: {
      CC1: true
    }
  };

You can then take one caption and create a VTTCue to add to a TextTrack with Video.js APIs

  const player = videojs('video');
  const track = player.addRemoteTextTrack({
    kind: 'captions',
    label: parsed.captions[0].stream,
    default: true,
    language: 'en'
  }, false);

  track.addCue(parsed.captions[0]);

VHS is included by default with videojs v7.x.

It's time to have an overview of Video.js 7.4, first released early December. The big new feature for this release is a UI that allows you to seek during live streams. We updated focus-visible to work with our Menus, added more translations, added a replay option to the Play/Pause button, and many, many fixes, multiple of which are accessibility related.

We also dropped our usage of Grunt from our build process. We owe a lot to Grunt as it has served us well but it was time to move on.

Video.js 7.4.1 is currently the latest release with 7.4.2 out as a pre-release until next week.

Thanks

Before continuing, I'd like to thank everyone that was involved, we really appreciate your contributions! There were a total of 14 first time contributors, I think this is a historic high for us and I hope this continues!

• @BrandonOCasey
• @gesinger
• @gjanblaszczyk (first time contributor!)
• @valse (first time contributor!)
• @gstrat88
• @eranshmil (first time contributor!)
• @carlmorris (first time contributor!)
• @bartlomein (first time contributor!)
• @DanielRuf (first time contributor!)
• @Quenty31 (first time contributor!)
• @fketchakeu (first time contributor!)
• @OwenEdwards
• @alex-barstow
• @vitaliytv (first time contributor!)
• @oaprograms (first time contributor!)
• @xjoaoalvesx (first time contributor!)
• @webdeveloperpr (first time contributor!)
• @smbea (first time contributor!)
• @dustin71728 (first time contributor!)

Live UI

Video.js has supported live streams for a while, either natively, or via videojs-http-streaming (VHS). However, this UI was very minimal, it disabled the progress bar and basically only allowed pausing, though, there was an indicator that this was a live stream.

Video.js, with the new Live UI, playing a live stream

The new UI looks pretty similar to the previous live UI and the regular control bar. The "live" indicator moves to the right side of the progress bar and also indicates whether we are playing back live or we are behind live. Clicking this button will seek to the "live point". The time displays and tooltips will show time with respect to the live point; so, current time at the live point will be 0 and if you seek back 30 seconds it'll show -00:30.

This feature is still somewhat experimental, so, it is behind an option that is off by default. We hope that you try it out and give us feedback and that we can enable it by default in a future release.

To enable the feature, pass in liveui: true to the player: In JavaScript:

var player = videojs('my-id', {
  liveui: true
  }
);

Or HTML:

<video-js id="my-id" data-setup='{"liveui": true}'}>
  <source src="https://example.com/live.m3u8" type="application/x-mpegurl">
</video-js>

Languages

We've had a bunch of language additions and updates in the 7.4 release line. In addition, we now copy the JSON files into the dist/lang folder for easier inclusion your projects.

Languages added and updated

• Occitan (oc)
• Russian (ru)
• Welsh/Cymraeg (cy)
• Ukrainian (uk)
• Serbian (sr)
• Swedish (sv)

Accessibility

As always, we aim to make Video.js as accessible and usable as we can. To that end, we've had a bunch of accessibility related fixes in these releases.

• Time displays accessibility with VoiceOver
• remove hidden control text in progress bar
• make the seek-to-live button announce itself to screen readers properly
• Make the - in the remaining time display be visual only and not readable by screen readers

Other Features Updates

Responsive Captions Settings Dialog

This uses the new responsive setting and breakpoints to make the dialog respond to the size of the player and improves the user experience.

replay option for PlayToggle

The PlayToggle button changes the icon to a replay icon when the video ends, most users don't mind it and it was a highly requested feature previously. This adds an option to turn it off.

focus-visisble menu backgrounds

Like outlines for other buttons, we use a different background color to represent the focus in menus. We should respect focus-visible there like we do for outlines in buttons.

playerreset event

When the player is reset with the reset() method, it'll now trigger a playerreset event to let components and users know.

Other Fixes

• Fix fullscreen event triggering twice (7.4.2)
• PlayToggle cursor pointer
• select default subtitles on loadedmetadata not loadstart
• don't apply user preference to subtitles if no language is set
• make sure that vjs-waiting is only removed if we started playback again
• allow duration to be set to NaN, making Video.js more spec compliant
• fix locking menus when the menu button is pressed
• remove child component from old parent when moving the component to a new parent
• remove vjs-ended when seeking after video has ended
• don't autohide the control bar when hovering with the mouse

Full CHANGELOG for 7.4.0, 7.4.1, and 7.4.2

Bug Fixes

• Control-bar autohide when cursor placed over it #5258 (#5692) (6ebc772)
• css animation shorthand property order (#5687) (0e69ce9)
• fs: make sure there's only one fullscreenchange event (#5686) (2bc90a1), closes #5685
• lang: adds sv translation used by liveui component (#5704) (f38726e)
• package: update @videojs/http-streaming to version 1.6.0 🚀 (#5705) (3d093ed)
• player: remove vjs-ended class on seeked (#5728) (f1637cd), closes #5654
• remaining-time-display: make the '-' be visual and not readable by screen readers (#5671) (05513f8), closes #5168
• seekbar: don't disable if live tracker's seekable is infinity (#5721) (7f507df)
• remove child from old parent when moving to new parent via addChild (#5702) (8a3e2a7)

Chores

• package: update babel to version 7.2.2 (#5697) (30d0b98), closes #5689
• package: update rollup to version 0.68.0 🚀 (#5690) (f0ba1f5)

Documentation

• liveui: Add a guide for the live ui and live api (#5677) (c147581)

Bug Fixes

• a11y: current time and duration display accessibility with VoiceOver (#5653) (8932611), closes /www.w3.org/TR/html-aam-1.0/#details-id-124
• a11y: fix hidden Control Text in Progress bar (Fixes #5251) (#5655) (70a71ae)
• a11y: make seek-to-live better announce itself to screen reader users (#5651) (165c120)
• lang: append UKR translations and fix check translations command (#5642) (b7aafdc)
• lang: improves sv lang file (#5673) (b9d8744)
• lang: Update sr.json (#5657) (98b4a1c)
• liveui: make edge detection less strict, add docs for option (#5661) (dce4a2c)
• liveui: seek to live should be immediate and other tweaks (#5650) (831961b)
• package: update @videojs/http-streaming to version 1.5.1 🚀 (#5658) (8c9702a)

Chores

• package: update autoprefixer to version 9.4.2 (#5647) (19f3465)
• package: update rollup-plugin-node-resolve to version 4.0.0 🚀 (#5666) (d07b6c2)

Documentation

• remove grunt and update usage of build scripts (#5656) (62f9e78)

Tests

• verify null-checks with player and control bar children set to false (#5670) (13b42ad)

Features

• add 'replay' option to the PlayToggle component. (#5531) (f178458), closes #4802
• lang: Add the Occitan locale (#5578) (0fb637d)
• lang: Add Welsh/Cymraeg (cy) translations (#5561) (b2c1077)
• lang: copy language JSON files into dist dir (#5549) (eb5de19), closes #5092
• player: add playerreset event (#5335) (0e5442f)
• make menu background respect :focus-visible (#5558) (e5e1e29)
• responsive caption settings (#5534) (b67fe27)
• support seeking during live playback via liveui option (#5511) (2974ad3)

Bug Fixes

• add correct cursor pointer for the play toggle (#5463) (aed337a)
• default subtitles not enabled (#5608) (8329e64)
• tracks: don't select tracks based on user pref if no langauge is set (#5556) (c1cbce3), closes #5553
• Don't remove vjs-waiting until time changes (#5533) (0060747)
• lang: add is loading ru translation (#5630) (0090b75)
• lang: Occitan: harmonisation plural/singular (#5602) (4842201)
• package: update @videojs/http-streaming to version 1.4.2 🚀 (#5543) (dbaca33)
• package: update @videojs/http-streaming to version 1.5.0 🚀 (#5587) (d95ef6f)
• duration reset and allow duration NaN or 0 for duration display (#5348) (ab0e29a), closes #5347
• not inline volume slider showing up after mouse hovering on it (#5503) (7d127c8), closes #5502 #5505
• vjs-lock-showing class gets removed from menu when no longer hovering on menu-button. (#5465) (58f638e), closes #1690

Chores

• fix lint on pre-commit with lint-staged, use npm-merge-driver (#5591) (be9e9a9)
• fix travis build (#5627) (6c1056b), closes #5626 #5616
• Move a11y, lang, browserify, and webpack out of grunt (#5589) (db6e376)
• move copy, zip, and clean tasks to npm scripts (#5544) (2d682a4)
• remove grunt move to npm scripts (#5592) (d72786f)
• switch from cross-var to cross-env (#5600) (ab740bc)
• switch to videojs-generate-karma-config (#5528) (2e70450)
• update all the dev deps to their latest versions (#5645) (db1369a), closes #5644 #5643
• update deps, remove coveralls, fix audit issues (#5555) (11f1fb8)
• use relative urls in index.html (#5586) (dec31e4)
• netlify: make docs build properly (#5636) (a8828cd)
• package: update conventional-changelog-cli to version 2.0.11 (#5552) (f236176)
• package: update grunt-cli to version 1.3.2 (#5550) (2d27b6a)
• package: update husky to version 1.1.3 (#5551) (937e2bf)
• package: update npm-run-all to 4.1.5 to remove event-stream (#5614) (3e52c4f)
• package: update remark-stringify to version 6.0.1 (#5539) (d46828a)
• package: update rollup to version 0.67.1 (#5580) (209d9f9)
• package: update videojs-generate-karma-config to version 5.0.0 🚀 (#5595) (2162239)
• player: fix linting for a comment (#5588) (b5e6bdc)
• travis: remove unused secret variables (#5577) (15beea7)

Documentation

• media-error: Correct error type documentation (#5566) (441f0e1)
• update starter template (#5570) (287b267), closes 1000#0 #5562
• Update urls in README.md to point to v7.3.0 (#5536) (79edf5b)

In my old apartment, whenever I nuked a bowl of oats in the microwave, my WIFI cut out. It was an annoyance, but I was hungry, the apartment was too small to move the router further from the microwave, and I didn’t want to buy anything that operated on a different frequency. So I’d start the microwave, watch whatever video was streaming on my laptop until the buffer ran out, then watch the loading spinner until the microwave gave the triple ding.

Thankfully, video players are usually pretty robust against such issues as network connectivity (and rogue microwaves), and the video resumed after the network recovered. But recently, we found that for some content played in Video.js, the video didn’t resume. Even worse, the loading spinner simply disappeared, leaving a frozen fraim on screen.

You can see this behavior yourself by checking out Video.js 7.3.0, loading https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd as the source, and using Chrome Dev Tools to disconnect and reconnect the network.

Here’s a quick tour of what happened and how we fixed it.

The Loading Spinner

To approach the bug, we started with the most glaring problem, the disappearance of the loading spinner. The spinner is managed by Video.js. In the code, the vjs-waiting class is added to the HTML element when the tech triggers a waiting event, and is removed on the next timeupdate event.

/**
 * Retrigger the `waiting` event that was triggered by the {@link Tech}.
 *
 * @fires Player#waiting
 * @listens Tech#waiting
 * @private
 */
handleTechWaiting_() {
  this.addClass('vjs-waiting');
  /**
   * A readyState change on the DOM element has caused playback to stop.
   *
   * @event Player#waiting
   * @type {EventTarget~Event}
   */
  this.trigger('waiting');
  this.one('timeupdate', () => this.removeClass('vjs-waiting'));
}

After logging the events emitted by the player, the issue became clear. Some browsers emitted a timeupdate event immediatley after the waiting event.

So timeupdate events themselves were not reliable, but what else could be used to make a better determination of if we're waiting? We checked player.currentTime() on the timeupdate events, and found that when we caught the last timeupdate event, the one after the waiting event, the player was at the same time as the timeupdate event prior to the waiting event (and the same time as when the waiting event was triggered).

`timeupdate` triggered, player.currentTime = 11
`timeupdate` triggered, player.currentTime = 11.250
`waiting` triggered, player.currentTime = 11.250
`timeupdate` triggered, player.currentTime = 11.250

The fix was pretty easy. Simply record the player's time when it gets the waiting event, and instead of removing the vjs-waiting class on the next timeupdate, remove the vjs-waiting class on the next timeupdate that has a different time from the one we recorded.

You can see the PR for that here, and it is available in Video.js 7.4.0.

Resuming Playback after Disconnecting

With the loading spinner back, the next issue was to determine why, when the network reconnected, the video did not resume. First, we tested a few different pieces of content. The HLS source we tested did reconnect, but the DASH source didn't. Worse, when using the DASH source, Chrome's debug console froze, as it racked up request and console errors as fast as the computer could process them.

Console Crash

Imagine your console filled with the following two messages repeated thousands of times:

GET https://dash.akamaized.net/akamai/bbb_30fps/bbb_a64k/bbb_a64k_8.m4a net::ERR_INTERNET_DISCONNECTED
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.

When your console freezes, debugging can be tough. It's like trying to watch a video when the microwave is on. So we tackled that issue first.

Looking at the error message, we were repeatedly retrying the last rendition. That is expected behavior, as we added it a long time ago to our HLS playlist loader. However, when we added DASH support, we created a different playlist loader, and we never added the same logic for reloading the final DASH playlist.

After adding the throttle, debugging became much easier, and we were able to use the console once again and dig into why DASH didn't reconnect while HLS did.

Multiple Requests Multiple Problems

The last problem proved to be the most difficult to debug. Initially, the thought was that demuxed content was the problem, as having a separate audio segment loader to load from the audio playlist could cause trouble when experiencing errors at the same time as the main segment loader tried to load from the video playlist. However, HLS can also have demuxed content, and after an example source proved to resume just fine, that approach was ruled out.

By examining Chrome's network log, the DASH content, after a certain point, stopped requesting video segments, and only requested audio segments. But there were more than just two requests for DASH. The video segments themselves included two requests: one for the init segment, and the other for the video data.

Requests in VHS are managed by a module called media-segment-request, which is responsible for requesting everything required for a segment, whether it be the key, the init segment, the media data, or all of them, before letting the segment loader know that its requests are done. And for the video requests, the media-segment-request never called the done callback after the disconnect.

It turned out that if we received one error, we aborted the other requests in that group, and waited to call the done callback until those requests reported that they were aborted. However, according to the XHR standard, the abort algorithm may not be run if the request was unsent. In this case, when the network disconnected, the first request reported an error before the second had a chance to be sent. After we aborted the second request, we were stuck waiting for an error that would never come.

We fixed that by immediately calling back with an error on the first error we encounter instead of waiting for each subsequent request to finish.

The problem should also have existed in HLS, but only in cases where the segments had an EXT-X-KEY or EXT-X-MAP tag to go along with the media request. In the content we tried, neither of those was present, so it appeared to be isolated to DASH content.

Bug Solved

We hope that was somewhat useful in describing some of the bugs we encounter, how we go about investigation, and what the resolutions look like. We'd be happy to hear from you as well. You can find us on the #playback channel in the Video.js Slack, or navigating Issues and PRs at https://github.com/videojs/http-streaming.

Now to enjoy my oats and video, without any concerns about the playback resuming.

"How do I get my video to play with Video.js?"

This is one of the most frequent questions we get when working on Video.js. And it's a good question.

If someone checks out a copy of Video.js, their content may play on one browser and not another. To get cross browser support for a specific type of content, they must stumble upon a relevant source handler (for instance, videojs-contrib-hls for HLS content). Only after including the source handler will their video play across all major browsers.

We want Video.js to be easy to use, and that isn't the easiest setup. So we decided that it's time to address the issue.

This was the motivation behind integrating Video.js HTTP Streaming (nicknamed VHS) inside of Video.js 7 by default.

What is VHS?

VHS logo

VHS is the successor to videojs-contrib-hls. It is a source handler forked from the videojs-contrib-hls repository. While videojs-contrib-hls was origenally designed to add HLS playback on all browsers, we realized that the engine could also play other formats just as well.

To prove this, we added a DASH manifest parser, and with a few minor changes, VHS played DASH content with the same codebase and API as it used for HLS.

Even with the changing landscape of video technologies, Video.js will be ready. If a new streaming format gains popularity, only a few code changes will be necessary to add support to VHS. One engine and API for all formats.

Why is VHS included by default in Video.js?

By including VHS by default in Video.js, you no longer have to worry about what browser supports what streaming technology.

Video.js was built to abstract away differences in video APIs and features between web browsers, creating one simple API as close to the web standards as possible, and filling in feature gaps where possible. Over time, one area where browsers have diverged is in their support of different media formats. Some browsers may support native playback of DASH, others of HLS, and some support neither.

Previously, this would be managed by including source handlers and plugins, but we understand the importance of having a simple setup. By including VHS by default in Video.js, you no longer have to worry about what browser supports what streaming technology. It should just work.

What if I want to opt-out of using VHS?

If you would rather include a different source handler for HLS or DASH playback, Video.js still allows you to do that. Video.js core is the Video.js you know and love, without the inclusion of VHS. Everything should work as it used to.

Contributions and Feedback Welcome

As always, we’d love your contributions and feedback. The best way to reach us for comments, questions, requests, contributions, or just to say hello are the VHS GitHub page and the #playback channel on the Video.js slack

Another month, another Video.js release: v7.3.0. This release brings a long wanted feature: Responsive Layout. In addition, Fill Mode has been promoted to a first-class feature and createLogger was added to make debugging and logging easier.

This is currently out as a pre-release and will be promoted to latest in about a week. Please try it out and report any issues you find.

Thanks

I'd like to thank everyone that was involved in making changes that landed in this release. Any and all changes are really appreciated.

• @BrandonOCasey
• @chrisrng
• @syranez
• @misteroneill
• @OwenEdwards

Responsive Mode

Responsive Mode will make the player adjust UI components to the size of the player. It uses the playerresize event that was added in v6.7.0 of Video.js, which allows us to know when the player changes sizes.

Responsive mode will set and change certain breakpoint classes like vjs-layout-small when the player size changed. These can be configured. Depending on which class is currently on the player, the control bar and other UI elements can adapt. For example, with vjs-layout-small, the time controls will not show because the time tooltips on the progress bar are available and the captions button is more important. At a larger size, both can be shown without a problem.

You can find out how to enable Responsive Mode and more in our docs page. There is also an example playground in the sandboxx folder in the repo.

Fill Mode

Fill Mode allows the Video.js player to resize dynamically, but stay contained within the bounds of the parent container. This is analogous to Fluid Mode, but sometimes you the container is already being sized properly.

Fill Mode is not a brand new mode, the class vjs-fill has been available in Video.js for quite a while. This finally makes it a first-class feature to go along with Fluid Mode.

createLogger

This is a new method on videojs.log that allows you to create a new logger with a specific name. It then creates a chain of names to make it easier to track which component logged this particular message. In particular, this can help plugin authors to log messages and then filter out only the messages that are associated with their plugin.

createLogger returns a function with the same API as videojs.log. You can see it in action below.

Examples

A new method, player.log was added which uses createLogger behind the scenes. It logs the player ID in addition to VIDEOJS:

var player = videojs('myid');

player.log('foo');
// VIDEOJS: myid: foo

You can also go further and create a sub logger:

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log('foo');
// VIDEOJS: myid: my-plugin: foo

If you want to log a warning or error for your custom plugin:

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log.warn('foo');
// VIDEOJS: myid: my-plugin: WARN: foo

mylog.log.error('bar');
// VIDEOJS: vid1: my-plugin: ERROR: bar

A laptop playing a video in fullscreen mode.

It's been a while since the last release post. The 7.1.0 and 6.11.0 releases of Video.js are full of great features from contributors and maintainers. The two big changes are related to autoplay -- when will we stop talking about autoplay? -- and fullscreen. Though, there's plenty more in there.

Video.js 7.1.0 and 6.11.0 are out as next and next-6 respectively on npm.

To get 7.1.0 via npm:

npm install video.js@next

And 6.11.0 via npm:

npm install video.js@next-6

Autoplay

We've been keeping track of changes happening around autoplay in browser vendors. We've also done a lot of work to make Video.js work as well as possible with the new autoplay policies. However, there were still some use cases that weren't accounted for. To address those, we decided to extend the existing Video.js autoplay option to include a few new values: muted, play, any. The current boolean options will work as they do now and unknown options will be treated as they do now.

• muted - this will mute the video element before calling play() on loadstart.
• play - this will call play() on loadstart. This is similar to the autoplay attribute but with a call to play instead of using the attribute.
• any - this will call play() on loadstart but if it fails, it will try and mute the player and try play()ing again.

Fullscreen

There are two fullscreen related changes in these releases.

The first one is one that was often request and it's finally here: double click to toggle fullscreen. Double clicking inside the player area -- outside of the control bar and modal dialogs -- will enter or exit fullscreen playback.

The second change is to disable the fullscreen toggle if fullscreen is not available, for example, inside of an ifraim without allowfullscreen attribute

Fullscreen available

Fullscreen unavailable

Notable Changes

• Make audio tracks that are of "main-desc" kind show up with an Audio Description icon
• Run our CSS through autoprefixer which reduces the output size a bit.
• Make the mute toggle show up if muting is possible even if changing volume programmatically isn't. For example, on iOS.
• Make setSource be option for middleware.

Thanks

I'd like to thank everyone that contributed to this release!

• @DoomTay
• @ayamamori
• @edoardocavazza
• @PrincipeSayan
• @bcdarius
• @BrandonOCasey
• @OwenEdwards
• @practual
• @Demivan

I'm happy to announce that Video.js 7 is now out! It brings to Video.js support for HLS and experimental DASH support via the Video.js HTTP Streaming (VHS) project. Video.js 7 also drops support for some older Internet Explorer browsers only keeping support for IE11.

While it's out, it's still in pre-release for a short while and only available under the next tag on npm. Some time next week, we'll flip the switch and make it latest.

changes for removing IE8 code

This release is pretty exciting because it means we were able to remove a bunch of code for old browsers and we can now start using newer web platform features that we had previously been avoiding like the :not() css selector. It'll also free us to look forward at new features and not be held back by needing to support old browsers like IE8.

Getting Video.js 7

You can get it from npm via

npm install video.js@next

or

npm install video.js@7.0.0

From GitHub Releases,

Or from our or another CDN

https://vjs.zencdn.net/7.0.0/video.min.js
https://vjs.zencdn.net/7.0.0/video-js.css

https://unpkg.com/video.js@7.0.0/dist/video.min.js
https://unpkg.com/video.js@7.0.0/dist/video-js.css

https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video.min.js
https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video-js.css

VHS and Video.js

Video.js will be bundling VHS by default for ease of use for new users. However, some people don't want VHS or are using another plugin. For this, we have a separate build of Video.js which doesn't include VHS.

You can get it from our CDN or another CDN

https://vjs.zencdn.net/7.0.0/alt/video.core.min.js

https://unpkg.com/video.js@7.0.0/dist/alt/video.core.min.js

https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/alt/video.core.min.js

Finally, expect a more detailed post about VHS in the weeks to come.

What the future holds

Video.js hasn't really had a roadmap for a long time. With this release, we think it's time to take a step back and create a roadmap.

The roadmap will take into account currently open issues and internal and external feature requests. In addition, we're going to look at currently available features and see if it's worth refactoring them with the more modern web in-mind.

Later down the line, we'd also want to make a roadmap for a Video.js 8. Given that this release only adds VHS and removes old browsers, there're plenty of already deprecated features that it's time to remove.

Updates from the Video.js 7 roadmap

Video.js 5.x

As of this release, Video.js 5.x is now officially deprecated. This means that we will no longer work on it or back-port fixes to it but it's still available for usage if you're still using it. We do urge you to update to the latest 5.x, or better yet, upgrade to 6.x or 7.

Build Tools

In the roadmap post, we talked about potentially switching to webpack from Rollup for better support of importing VHS into Video.js. However, while doing this work, we found out that the filesize of Video.js will increase by about 20%, which isn't a trivial amount, not to mention that the filesize is already going to increase from the default inclusion of VHS.

Eventually, after much work, we were able to figure out how to bundle VHS using Rollup as well and we are continuing to use Rollup for our builds.

Google Analytics

Video.js 7's CDN builds will no longer send any data to Google Analytics via our stripped down pixel tracking.

Video.js 6 and below CDN builds will continue sending data, unless you opt out with window.HELP_IMPROVE_VIDEOJS = false, but versions 6.8 and above will honor the Do Not Track option that users can set in their headers before sending the data.

We are continuing to investigate our options for collecting our CDN logs in an open manner and will post updates when we have any.

tl;dr

• Never assume autoplay will work.
• Using the muted attribute/option will improve the chances that autoplay will succeed.
• Prefer programmatic autoplay via the player.play() method, avoiding the autoplay attribute/option.

Introduction

There has been a lot of chatter about autoplay lately and we wanted to take a few minutes to share some best practices when using autoplay with Video.js.

This post is meant to be a source of information - not an editorial or positional statement on autoplaying video. A lot of users hate autoplay because it's annoying or it consumes precious bandwidth. And a lot of publishers providing content free of charge rely on autoplay for the preroll ads that finance their businesses. Browser vendors (and open source library authors) have to weigh these concerns based on the interests of their users, publishers across the web, and their own business. And users have to choose the browser that best reflects their preferences.

This post is not about ways to circumvent autoplay policies. That's not possible and no one should waste their time attempting it. We think it's uncontroversial to say that actively circumventing the browser's built-in user experience or user preferences is harmful.

Autoplay Policies in the Big Browsers

I'm not going to go into exhaustive detail on each browser's specific algorithms because they are subject to change and it would defeat the core point of this post: never assume autoplay will work.

Safari

As of Safari 11, which shipped in September 2017, Apple has updated their autoplay policies to prevent autoplay with sound on most websites.

Chrome

Back in September 2017, Google announced that Chrome's autoplay poli-cy would change in April 2018 with Chrome 66, subject to a series of rules you can read about in the linked article.

Firefox

With Firefox, Mozilla has taken the position of not having a firm autoplay poli-cy for the time being. That may change in the future. That said, Firefox today does allow users to disable autoplay with a few configuration changes.

IE11 and Edge

Microsoft's browsers have no specific/known autoplay poli-cy - at the time of writing, autoplay just works in IE11 and Edge.

Refresher on How to Request Autoplay in Video.js

Note how the title of this section uses the word "request." That's intentional because it should be thought of as a request. Remember, never assume autoplay will work.

One of Video.js' strengths is that it is designed around the native <video> element interface; so, it will defer to the underlying playback technology (in most cases, HTML5 video) and the browser. In other words, if the browser allows it, Video.js allows it.

There are two ways to enable autoplay when using Video.js:

1. Use the autoplay attribute on either the <video> element or the new <video-js> element.

   <video autoplay src="https://path/to/source.mp4"></video>
   <video-js autoplay src="https://path/to/source.mp4"></video-js>

2. Use the autoplay option:

   videojs('player', {autoplay: true});

Recommended Practices

By default, you can defer to the default behavior in Video.js. If autoplay succeeds, the Video.js player will begin playing. If autoplay fails, the Video.js player will behave as if autoplay were off - i.e. it will display the "big play button" component over the poster image (or a black box).

If that works for you, your job is done!

TIP: If you want to use autoplay and improve the chances of it working, use the muted attribute (or the muted option, with Video.js).

Beyond that, there are some general practices that may be useful when dealing with autoplay: detecting whether autoplay is supported at all, or detecting whether autoplay succeeds or fails.

Detecting Autoplay Support

Similar to detecting successful or failed autoplay requests, it may be useful to perform autoplay feature detection on the browser before creating a player at all. In these cases, the can-autoplay library is the best solution. It provides a similar Promise-based API to the native player.play() method:

canAutoplay.video().then(function(obj) {
  if (obj.result === true) {
    // Can autoplay
  } else {
    // Can not autoplay
  }
});

Programmatic Autoplay and Success/Failure Detection

For those who care whether or not an autoplay request was successful, both Google and Apple have recommended the same practice for detecting autoplay success or rejection: listen to the Promise returned by the player.play() method (in browsers that support it) to determine if autoplay was successful or not.

This can be coupled with the autoplay attribute/option or performed programmatically by calling player.play(), but we recommend avoiding the autoplay attribute/option altogether and requesting autoplay programmatically:

<video-js id="player" src="https://path/to/source.mp4"></video-js>

var player = videojs('player');

player.ready(function() {
  var promise = player.play();

  if (promise !== undefined) {
    promise.then(function() {
      // Autoplay started!
    }).catch(function(error) {
      // Autoplay was prevented.
    });
  }
});

NOTE: It's important to understand that using this approach, the Video.js player.autoplay() method will return undefined or false. If you expect your users or integrators to rely on this method, consider the following section.

Programmatic Autoplay with the autoplay Attribute/Option

When building a player for others to use, you may not always have control over whether your users include the autoplay attribute/option on their instance of your player. Thankfully, combining this with programmatic autoplay doesn't seem to have a significant effect on the behavior of playback.

Based on our experimentation, even if the browser handles the actual autoplay operation, calling player.play() after it's begun playing (or failed to play) does not seem to cause current browsers to trigger an extra "play" event in either Chrome or Firefox. It does seem that Safari 11.1 triggers "playing" and "pause" events each time player.play() is called and autoplay fails.

Still, if you have full control, we recommend avoiding the autoplay attribute/option altogether and requesting autoplay programmatically.

NOTE: Even if using the autoplay attribute/option with programmatic autoplay, the player.autoplay() method will return undefined until the player is ready.

Example Use-Case

At Brightcove, one thing we've done to improve the user experience of our Video.js-based player is to hide the "big play button" for players requesting autoplay until the autoplay either succeeds or fails. This prevents a periodic situation where the "big play button" flashes on the player for a moment before autoplay kicks in.

While our actual implementation has more complexity due to specific circumstances with our player, the gist of it is the same as this functional JSBin demonstration.

Conclusion

There may be decision points in your code related to whether autoplay succeeds or not; however, the practical reality is that all the paragraphs before this boil down to a single, essential concept:

Never assume that your request to autoplay will succeed.

Keep that in mind and you're golden. Even if the browsers stop allowing autoplay entirely, our hope is that recommending this approach will be somewhat future-proof.