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.

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

1

npm install video.js@next

or

1

npm install video.js@7.0.0

From GitHub Releases,

Or from our or another CDN

1
2

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

1
2

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

1
2

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

1

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

1

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

1

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 policy 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 policy 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 policy - 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.

   1 2	<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:

   1	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:

1
2
3
4
5
6
7

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:

1

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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.

A major update to videojs-contrib-ads has been released. In this post, we’ll take a look at what videojs-contrib-ads offers and what has improved in version 6.

What is contrib-ads?

Videojs-contrib-ads is a framework for creating Video.js ad plugins. Seamlessly integrating ad support into a video player can be a daunting task, especially if you have other plugins that may be effected. For example, playing ads may result in additional media events. Imagine an analytics system that listens to “loadstart” events: it would start seeing double when extra loadstart events result from preroll ads. contrib-ads has a feature called Redispatch that makes sure ads do not trigger extra media events. This keeps things as simple as possible without breaking other plugins. Additional benefits of using contrib-ads are listed in the readme.

Version 6

Version 6 of contrib-ads is a maintenance release that includes a major code refactor. The core of the project’s behavior is handled by a state machine that advances through various states as the player plays content, preroll ads, midroll ads, and postroll ads. The initial state machine was designed to implement a specific set of functionality when the project was first conceptualized. Over the years, the project became much more fully-featured and many new scenarios and edge-cases arose. In this refactor, the state machine has been updated to precisely match the modern feature-set. This has resulted in a more maintainable and reliable codebase.

How it works

Ad mode is strictly defined as if content playback is blocked by the ad plugin.

contrib-ads has a concept called ad mode. Ad mode is strictly defined as if content playback is blocked by the ad plugin. This does not necessarily mean that an ad is playing. For example, if there is a preroll ad, after a play request we show a loading spinner until ad playback begins. This is considered part of ad mode. The public method player.ads.isInAdMode() can be used to check if we are in ad mode.

In version 6, the state machine was refactored to match this strict definition of ad mode. There are two types of states: content states and ad states. If contrib-ads is in an ad state, it is in ad mode.

Here is a diagram of the new states. Blue states are content states and yellow states are ad states:

For a history of how the state machine has evolved over time, there is detailed information in this Github issue. In this article we’re going to focus on how it works in version 6.

Let’s walk through the states for a simple preroll scenario. contrib-ads begins in the BeforePreroll state. This is considered a content state because content playback hasn’t been requested yet and so ads are not blocking playback. The ad plugin can asynchronously request ads from an ad server during this time, even though the plugin is in content mode. The ad plugin triggers the adsready event when it’s ready. Contrib-ads knows that once the play button is pressed, ads are already prepared.

Now the user clicks play. At this point ad mode begins and contrib-ads moves forward to the Preroll state. The Preroll state shows a loading spinner until ad playback begins. The Preroll state knows that the ad plugin is ready and that play was clicked, so triggers readyforpreroll to inform the ad plugin that it’s time to play an ad. Once ad playback begins, the control bar turns yellow and will not allow seeking. If the ad takes too long to begin playing, a timeout will occur and content will resume without further adieu. When the ad is complete, contrib-ads restores the content video. Only when content playback results in a playing event does ad mode end.

Now we’re in the ContentPlayback state. At this point, the ad plugin could play a midroll ad, causing a brief foray into the Midroll state, or content could continue without interruption.

When content ends, normally we would see an ended event right away. Instead, contrib-ads sends a contentended event, which is the ad plugin’s chance to play postroll ads. Perhaps the ad plugin has decided not to play postroll ad, so it responds by triggering nopostroll. contrib-ads knows that now we’re really done, so an ended event is triggered.

Finally, since content has ended for the first time, we now transition to the AdsDone state. There will be no more ads, even if the user seeks backwards and plays through the content again.

Conclusion

Ads may not be your favorite part of watching video online, but contrib-ads makes sure that they don’t break your site and that content plays even if ads fail. If you’re interested in learning more or contributing to the project, check it out on Github!

Today, I’m excited to announce the roadmap to Video.js 7! While this is a major version update, there is very little that is actually breaking. The two main changes are the addition of videojs-http-streaming, VHS for short, and the removal of support for older versions of Internet Explorer.

Video.js HTTP Streaming

VHS used to be videojs-contrib-hls, but as MPEG-DASH became more popular, we realized that we wanted to support it as well and that we can share a lot of the code between HLS and DASH implementations. Look for more details in an announcement post for VHS soon!
VHS will ship with Video.js by default because one of the guiding principles of Video.js is to make it easy for users to just put it on the page and have a player that works across browsers. With HLS and DASH becoming so popular, we thought it was about time for a plug and playable Video.js for the most common streaming formats.
In addition to having it be included by default, we’ll make sure to provide builds that exclude VHS for those that don’t need it or are using another playback engine like HLS.js.

Old IE

Video.js has a long history of making best effort to support IE, starting with the Flash fallback originally created for IE8. When Video.js 5 was released, we had a lot of code in place to support IE8 and when Video.js 6 came around, with Flash on its way out, we moved Flash support to a separate project, videojs-flash. Now, based on usage data, we are planning to remove support for IE8, IE9, and IE10.
According to the data we’ve gathered, IE in total has a share of about 4%. Of those 4%, IE8, IE9, and IE10 combined make up barely 5%, and IE11 has around 91% usage. This means that combined IE8, IE9, and IE10 are barely 0.002% of the total usage of Video.js. Based on this incredibly small footprint, we believe it isn’t worth the substantial effort required to maintain support for these browsers. The good news is, for those concerned, Video.js 6 isn’t going away anytime soon and will be available for your old IE support needs.
In addition to the statistics, our tests currently take between 5 and 10 minutes to run on IE8. Removing this will allow us to greatly decrease the duration of our test suite. Even worse, sometimes the tests timeout and retry for up to 40 minutes but when they restart they pass on the first try. Not having to deal with these types of issues will allow us to increase our testing infrastructure and provide a better product.

Thanks Browserstack for sponsoring browser-based testing for Video.js!

Video.js 5.x

When Video.js 7 is released it’ll be the end-of-life for Video.js 5.x from a support perspective. Of course, we are not going to unpublish this version from npm or remove the files from the CDN, so you are free to continue using it. However, we urge you to update at your earliest convenience as we will no longer be accepting fixes.

Google Analytics

Thanks Fastly for sponsoring vjs.zencdn.net

Video.js provides CDN hosted files for Video.js, sponsored by Fastly – thanks Fastly! These files currently have a stripped down pixel tracking for Google Analytics (GA) that sends limited information to a GA account we own. We did a terrible job communicating that this is happening and how users can opt out – set window.HELP_IMPROVE_VIDEOJS to false before loading in Video.js – or use another CDN like unpkg or CDNJS. Recently we made a change that makes this tracking pixel honor the Do Not Track flag set by users in the browser, however, this isn’t going to affect previously released versions of Video.js

In addition, starting with Video.js 7.0 (and probably back ported to newer versions of 6.x) we will no longer include this tracking pixel in our CDN builds. Instead, we are investigating our options for using the CDN logs via Fastly. We expect to share more details as we get closer to the Video.js 7 release date and have a better idea of what we will be doing.

Build Tools

Currently, Video.js uses rollup to combine all the Video.js files into two files for different build systems. One that excludes dependencies, for use in bundlers, and another that includes dependencies for a UMD file that can be used on a page as a <script>. We are looking to transition our build and test tooling from rollup and browserify to Webpack 4.0 to provide more flexibility in our builds and to do a better job at being able to build with VHS (as many people remember the infamous issue 600 on the contrib-hls repo).
In addition, we’ll be looking into allowing custom builds when bundling Video.js. For example, if one doesn’t want VHS or doesn’t want visible controls, a surprisingly large part of the player, they can set VJS_VHS=false VJS_CONTROLS=false when they’re bundling their application to keep these pieces out of the build.

Timeline

We are still working on a lot of what was mentioned above but our hope is to have the first pre-release of 7.0 before the end of March.

We’re pretty excited about this not-so-major update and hope you will be too!

Brightcove and Video.js have adopted the videojs-vr plugin as a first class plugin.
It’s out now with support for Video.js 6!

Where did it come from?

This plugin has a long history and has had many maintainers.
It started as slawrence/videojs-vr. From there it became metacdn/videojs-vr. Then there was a private collaberation between StreamShark.io, Brightcove, and HapYak. Eventually we decided to treat this plugin like a first class citizen. So we updated it to the advanced plugin API, fixed a few long-standing issues, documented other issues along the way, and moved it to the Video.js Organization.

How do you know a video is 360/VR?

On desktop players

In a non-browser environment this question is easily answered, because there is a generally agreed upon standard. The video itself should have metadata indicating that the video is a 360/VR video and how to display it. Even outside of the browser though it is a bit tricky because most programs (even ffmpeg) don’t support the insertion of this metadata. In fact a lot of them will strip said metadata as they think it is invalid. That is where a project called Spatial Media Metadata Injector comes in. Spatial Media Metadata Injector injects 360/VR metadata into the video without changing anything else.
That allows players like VLC to know that a video is 360/VR.

How does videojs-vr do it?

The browser does not expose video metadata in an API so we would have to parse it ourselves, which isn’t really an option. So in videojs-vr we have a projection option that can be passed in during plugin initialization.

The first and default setting for projection is 'AUTO'. Setting projection to 'AUTO' tells videojs-vr to look at player.mediainfo.projection. player.mediainfo.projection will have to be set by some external plugin/script which is told by a server that the current video is 360/VR. The player.mediainfo.projection of a video can be any of the following:

• '360', 'Sphere', or 'equirectangular': The video is a sphere
• 'Cube' or '360_CUBE': The video is a cube
• 'NONE': This video is not a 360 video, the videojs-vr plugin should do nothing. this would not have to be set as it will be assumed if no projection exists.
• '360_LR': Used for side-by-side 360 videos
• '360_TB': Used for top-to-bottom 360 videos

Otherwise, the projection can manually be set on plugin initialization to any of the above values. The plugin can then be disposed and re-initialized for each video with a different setting.

What happens after after we know a video is 360/VR?

Using the current projection value we determine what we need to show on our three.js canvas. From there we use the polyfilled (via webvr-polyfill or real VRDisplay API to set up controls. If the device has a VIVE, Oculus, etc plugged in we use that. If not we display the video in 360 mode where the mouse/keyboard/accelerometer control the video. On mobile devies there is also a button to go into cardboard mode which will show the video as two smaller videos separated by a line. This is so that the video can be viewed using pseudo VR headsets (such as google cardboard) and a phone. While the video is playing we use animation frames to animate the VideoTexture on the three.js canvas. That allows us to show the correct portion of the video based on the controls that the user is inputting.

Why is it so huge?

We all agree that the plugin is huge, but due to the fact that all browsers do not natively support the VRDisplay API, we have to include a lot of big dependencies in our project. Mainly the size comes from the following:

1. three.js which we use to create the VR/360 canvas, and implementing it on our own would be painful
2. webvr-polyfill which polyfills VR features for browsers that don’t currently support VR (outside of experimental flags and builds)

Debugging

Every object from three.js and webvr manager (from webvr-boilerplate) is available on the instance of the VR plugin that will is returned by player.vr().

Known Issues

• Multiple players on the same page will share controls, panning in one video will pan in the other.

The Future

• Implementing player level controls rather than window controls. This will allow individual videos to be controlled separately based on the current focus.
• A menu so that multiple VR displays can be used rather than just the first one that we find.

To see the code, submit an issue, suggest a feature, or submit a pr

See the github repo videojs-vr

Video.js 6.7.1 was released this week. This comes a month and a half since the first 6.6.0 release (which we forgot to blog about) and only a week since the latest patch release (6.6.3, which is now latest).

6.7 has two awesome new features and a couple helpers:

• a working playerresize event
• a new mediator type for middleware
• getPlayer and getAllPlayers helper on videojs.

Netlify

Recently, we also switched over all our online properties to run on Netlify. This is great because it gives us HTTPS via Let’s Encrypt but also allows us much better automation for the website, docs website, and blog. Since the docs website is tied to the main Video.js repo and has a build per PR, we also had Netlify generate an example page for the PR based on the sandbox examples. Here’s the example page for a recent PR.

playerresize

This new event will fire each time the player is resized. It will fire when going fullscreen and when exiting fullscreen and when resizing the player via the dimension methods or if the player is in fluid mode and the window is resized.
It uses the new ResizeObserver in Chrome 64 and wherever it is available. If it isn’t available, a polyfill can be passed in or it will use its fallback. The fallback uses an absolutely positioned, hidden iframe that’s the size of the player and then retriggers the iframe’s resize event on a debounced handler.
Also, I wanted to note that the resize player event does not refer to the size of the player itself but rather to the native resize event, which is triggered when the videoHeight or videoWidth has changed.

Mediator type for middleware

This is the first major feature for middleware since they were released in 6.0. The main reason for the mediator is for middleware to be able to cancel requests to play(). Thus, they are currently limited to play() and pause() calls currently. Once we iron out the details we hope to enable it for further functionality.
The mediator middleware allows you to intercept the calls to the mediator methods, like play(), and then prevent the calls from occuring on the tech. This is important for methods like play() because while calling pause() immediately after play() may succeed in “cancelling” playback, it also has some unintended side-effects in a few cases. The mediator middleware can decide whether play() should go through, thus eliminating the need to call pause(). Afterwards, all middleware will be notified whether the call was terminated or it will be given the return value. In the case of play(), it will be the play promise itself.

Here’s a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

videojs.use('*', (player) => ({
  setSource(src, next) {
    next(null, src);
  }

  callPlay() {
    // return this value to terminate the method call
    return videojs.middleware.TERMINATOR;
  }

  play(terminated, playPromise) {
    if (terminated) {
      return console.error(terminated, 'play was terminated');
    }

    playPromise
    .then(() => console.log('play succeeded!'))
    .catch(() => console.log('play failed :('));
  }
});

Player helpers

These are to make it easier to manage your players and reduce unintended side-effects. A lot of times, a player is being created automatically via data-setup but then to refer to it via code, videojs() is called. In some cases, this will actually initialize the player because it ended up running before the auto setup. Now, videojs.getPlayer() can be used instead and it will never create the player. It is the preferred way of getting the player once it has been created.
videojs.getAllPlayers() is just a nice way of getting a list of all the players that are currently available on the page.

Committers

• Gary Katsevman @gkatsev
• Pat O’Neill @misteroneill
• @ldayananda
• @mister-ben

Raw CHANGELOG

6.7.1 (2018-01-31)

Bug Fixes

• middleware: do a null check in mediator methods (#4913) (7670db6)

6.7.0 (2018-01-30)

Features

• Add getPlayer method to Video.js. (#4836) (a15e616)
• Add videojs.getAllPlayers to get an array of players. (#4842) (6a00577)
• add mediator middleware type for play() (#4868) (bf3eb45)
• playerresize event in all cases (#4864) (9ceb4e4)

Bug Fixes

• do not patch canplaytype on android chrome (#4885) (f03ac5e)

Chores

• generate a test example on netlify for PRs (#4912) (8b54737)
• package: update dependencies (#4908) (dcab42e)

Documentation

• Update COLLABORATOR_GUIDE.md and CONTRIBUTING.md to include label meanings (#4874) (a345971)

Tests

• add project and build names to browserstack (#4903) (41fd5cb)

November 17th marked the pre-release of Video.js 6.5.0. It comes shortly after the release of 6.4.0, which has now been promoted to latest! This is a pretty exciting release because we finally got our own element! I like to call it the I Can’t Believe It’s Not Custom Elements because it isn’t an actual custom element but it’s not a standard HTML element either. Also, a nice and smooth progress bar thanks to a first time contributor; thanks @vhmth!. A pretty major memory leak fix, and many code refactors and bug fixes.
I’d like to thank everyone who contributed and the four first time contributors to Video.js: @vhmth, @FirefoxMetzger, @EhsanCh, and @shahlabs.
This post comes a week late because it was Thanksgiving week in the US after release and I was on break, if you celebrate Turkey day 🦃, hope you had a good one!

Notable Changes

• I Can’t Believe It’s Not Custom Elements with a <video-js> element. It works exactly like the <video> embed but without requiring you to use the <video> element and the benefits and drawbacks that come with it. It also adds the video-js class name automatically for you, so, there’s no need to add it.
• A smooth progress bar!
  
  
• After much spelunking in the code base and developer tools, we’ve plugged most of the memory leaks with retained DOM elements in Video.js!
• Many code refactorings from our old code style to the new one by @kocoten1992!
• Previously, you could accidentally seek or toggle playback using the middle or right clicks. Now, just go ahead and try it!
• An accessibility fix with regards to title tooltips and menu items.
• Better handling of play() in our new asynchronous world, especially immediately after changing the source.

Committers

• Vinay @vhmth First PR
• Ilya Piatrenka @odisei369
• Brandon Casey @brandonocasey
• @FirefoxMetzger First PR
• Ehsan Chavoshi @EhsanCh First PR
• Chuong @kocoten1992
• Martin Bachwerk @arski
• Pat O’Neill @misteroneill
• Labdhi Shah @shahlabs First PR

Raw Changelog

6.5.0 (2017-11-17)

Features

• add a version method to all advanced plugin instances (#4714) (acf4153)
• allow embeds via element (#4640) (d8aadd5)

Bug Fixes

• Avoid empty but shown title attribute with menu items and clickable components (#4746) (dc588dd)
• Player#play: Wait for loadstart in play() when changing sources instead of just ready. (#4743) (26b0d2c)
• being able to toggle playback with middle click (#4756) (7a776ee), closes #4689
• make the progress bar progress smoothly (#4591) (acc641a)
• only allow left click dragging on progress bar and volume control (#4613) (79b4355)
• only print element not in DOM warning on player creation (#4755) (bbea5cc)
• trigger timeupdate during seek (#4754) (1fcd5ae)

Chores

• lang: update Persian translations (#4741) (95d7832)

Code Refactoring

• player.controls() (#4731) (d447e9f)
• player.listenForUserActivity (#4719) (c16fedf)
• player.userActive() (#4716) (6cbe3ed)
• player.usingNativeControls() (#4749) (eb909f0)

Documentation

• readme: fixed a typo (#4730) (46a7df2)

Performance Improvements

• null out els on dispose to minimize detached els (#4745) (2da7af1)

Tests

• clean up test warnings (#4752) (3aae4b2)
• update tests to use qunit 2 assert format (#4753) (06641e8)
• warning, if the element is not in the DOM (#4723) (c213737)

Hello everyone, it’s been a while! Yesterday, I pre-released Video.js 6.4.0. It’s a pretty big release with 27 merged Pull Requests from 13 authors and 7 of them were contributors!
I’d like to thank everyone who contributed but particularly those seven. Six of them made their first PRs with Video.js: @estim, @seggev319, @nicolaslevy, @MarcAMo, @knilob, @odisei369. And @kocoten1992 returned with some great PRs to refactor things.

In this release, we fixed a bunch of bugs, refactored some things, updated some tests. We also added some new features.

As with other releases, this is released as next for a short while before being promoted to latest.
You can get these releases on GitHub Releases or from npm

Notable Changes

• Hebrew translations are now available. Russian and Polish translations were updated as well.
• The Progress Control can now be disabled. This is useful for when you don’t want users to be able to interact with it but still want to show play progress.
  • The Progress Control will also be fully filled out when the video ends so that we aren’t slightly short or long due to weirdnesses in duration and currentTime.
• It’s now possible to add a hook that gets automatically removed once called with hookOnce. This mirrors our on and once event methods.
• If controls are disabled before the modal dialog is opened, the controls stay closed when the dialog is closed.
• player.src() will now return an empty string when no source is set to match player.currentSrc() and the native video element.
• Video.js will now warn when the element it is given isn’t in the DOM. This was done as part of a “first-timers-only” issue which we hope to do more off in the future.

Google Analytics note

We’ve updated the README of the project to be explicit about our usage of Google Analytics on the vjs.zencdn.net hosted version of Video.js. It is a stripped down version of the Google Analytics pixel and sends data on 1% of those loads.
It can be opted out of by adding the following to the page before the zencdn-hosted version of Video.js is loaded

1

<script>window.HELP_IMPROVE_VIDEOJS = false;</script>

Our GitHub releases and npm releases do not include Google Analytics. Neither do 3rd-party CDNs like unpkg or CDNjs.

Committers

• Gary Katsevman @gkatsev
• Pat O’Neill @misteroneill
• Brandon Casey @BrandonOCasey
• @estim First PR
• @seggev319 First PR
• @mister-ben
• Chuong @kocoten1992
• Nicolas Levy @nicolaslevy First PR
• Marc A. Modrow @MarcAMo First two PRs
• Matt McClure @mmcc
• Bo Link @knilob First PR
• Joe Forbes @forbesjo
• Ilya Piatrenka @odisei369 First PR

Full Changelog

6.4.0 (2017-11-01)

Features

• lang: add Hebrew translation (#4675) (32caf35)
• lang: Update for Russian translation (#4663) (45e21fd)
• Add videojs.hookOnce method to allow single-run hooks. (#4672) (85fe685)
• add warning if the element given to Video.js is not in the DOM (#4698) (6f713ca)
• allow progress controls to be disabled (#4649) (a3c254e)
• set the play progress seek bar to 100% on ended (#4648) (5e9655f)

Bug Fixes

• css: update user-select none (#4678) (43ddc72)
• aria-labelledby attribute has an extra space (#4708) (855adf3), closes #4688
• Don’t enable player controls if they where disabled when ModalDialog closes. (#4690) (afea980)
• don’t throttle duration change updates (#4635) (9cf9800)
• Events#off threw if Object.prototype had extra enumerable properties, don’t remove all events if off receives a falsey value (#4669) (7963913)
• make parseUrl helper always have a protocl (#4673) (bebca9c), closes #3100
• Make sure we remove vjs-ended from the play toggle in all appropriate cases. (#4661) (0287f6e)
• player.src() should return empty string if no source is set (#4711) (9acbcd8)

Chores

• gh-release: no console log on success (#4657) (e8511a5)
• lang: Update Polish (#4686) (ee2a49c)
• package: update babelify to version 8.0.0 (#4684) (db2f14c)
• add comment about avoiding helvetica font (#4679) (cb638d0)
• add GA note to primary readme (#4481) (e2af322)
• Add package-lock.json file. (#4641) (ec5b603)

Code Refactoring

• component.ready() (#4693) (b40858b)
• player.dimension() (#4704) (ad1b47b)
• player.hasStarted() (#4680) (cde8335)
• player.techGet_() (#4687) (a1748aa)

Documentation

• lang: update translations needed doc (#4702) (93e7670)

Tests

• fix modal dialog test for showing controls (#4707) (45a6b30), closes #4706
• get rid of redundant test logging (#4682) (983a573)

After months of hard work, I am proud to annouce the release of Video.js 6.0 🎉!

This release is pretty exciting. It greatly improves the accessibility of the controls and components, and we are committed to making Video.js the most accessible player we can. Video.js also provides some shiny, and awesome, new features for developers in middleware and advanced plugins. Video.js 6.0 is also the first release where Flash is unbundled from core – though, it is still available as a plugin, if necessary.

Today’s release is a pre-release and will stay that way for about a week or two before being promoted to latest. Just to make sure that any last bugs, if any, are ironed out.

Things you should know

Most things have not changed between 5.x and 6.x. In fact, in most of our work in plugins we maintain, the majority of the work was to use new methods and fallback to old methods because they were logging deprecation warnings. Those plugins would’ve continued working otherwise.

However, there are definitely some changes that are breaking and would require action on your part. For example, if you require Flash, that’s something that would now need to be included manually.

One of the other big changes is that source selection is now asynchronous. This was necessary for middleware support and most likely won’t affect users if they are waiting for the player to be ready before interacting with the player.

These are written up on our wiki. We’ll make sure to update it if there’s anything that we missed.

Feedback Wanted

If you are using Video.js and have comments or questions, please drop by on Slack. If you find a bug, please open an issue on GitHub, preferably with a reduced test case.

5.x Support

We’re still going to be supporting the Video.js 5.x release line. This will mostly be bug fixes but features will be considered on a case-by-case basis.

If IE8 support is still required, it is probably best to stick to 5.x.

npm tags

Once Video.js 6 is promoted to latest, it’ll take over the next and latest tags on npm. The 5.x release line will then be given its own set of tags: latest-5 and next-5.

Code of Condunct

We strive to be open and inclusive and so we have adopted a Code of Conduct, based on Contributor Covenant that applies to all Video.js projects.

Conclusion

We are super excited for this release! Please take it for a spin from next tag on npm or from the CDN. And please come chat with us on Slack.

Middleware is one of the cool new features that is coming to Video.js in version 6.0

With middleware, you are now able to interact with and change how the player and the tech talk to each other. The tech is Video.js’s abstraction from the player, separating the player API from the playback technology. With techs, we can plug things like a Flash fallback or a Youtube embed into Video.js without changing the external API or the look-and-feel of the player.

Video.js middleware are like Express middleware but routes are based on video MIME types.

A lot of Video.js users may be familiar with middleware from projects like Express. Video.js middleware isn’t that different from those. In both cases you register your middleware against a particular route to call down the chain when the route is triggered. In Express, routes are based on the url paths. In Video.js, these routes are based on the video MIME type. And, like Express, there are “star” (*) middleware that match all routes.

There are two important pieces to be aware of with middleware:

1. dynamic source handling
2. intercepting the player and tech interactions.

A Video Catalog

With the dynamic source handling, you could load video with a custom type and source and resolve it asynchronously. A good example for this is a video catalog system. The page can be rendered with a specific catalog ID and a special MIME type, like so:

1
2
3

<video controls class="video-js">
  <source src="123" type="video/my-catalog">
</video>

Then, you could register a middleware for that route – the type video/my-catalog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// middleware methods get the player instance as an argument
videojs.use('video/my-catalog', function(player) {

  // middleware are expected to return an object with the methods on it.
  // It can be a plain object or an instance of something.
  return {

    // setSource allows you to tell Video.js whether you're going to be handling the source or not
    setSource(srcObj, next) {
      const id = srcObj.src;

      videojs.xhr({
        uri: '/getVideo?id=' + id
      }, function(err, res, body) {

        // pass null as the first argument to say everything is going fine and we can handle it.
        next(null, {
          src: body.sourceUrl,
          type: body.sourceType
        })
      });
    }
  };
});

Then, when Video.js initializes, it’ll go through and call the middleware that are set for video/my-catalog.

Server-Side Ad Insertion

Server Side Ad Insertion (SSAI) is a great fit for middleware. It showcases the ability to intercept the play and tech interactions. For example, you have a 30 seconds ad followed by a five minute video in your HLS manifest. You want the timeline to display the ad time and the content time appropriate when each is playing. Right now, the duration displayed will be the combined duration of five minutes and 30 seconds (5:30). The solution is to add a middleware that knows when the ad is being played and tells the player that the duration is 30 seconds and when the content is playing that the duration is five minutes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// register a star-middleware because HLS has two mimetypes
videojs.use('*', function(player) {
  return {
    setSource(srcObj, next) {
      const type = srcObj.type;

      if (type !== 'application/x-mpegurl' && type !== 'application/vnd.apple.mpegurl') {

        // call next with an error to signal you cannot handle the source
        next(new Error('Source is not an HLS source'));
      } else {

        // in here we know we're playing back an HLS source.
        // We don't want to do anything special for it, so, pass along the source along with a null.
        next(null, srcObj);
      }
    },

    // this method gets called on the tech and then up the middleware chain providing the values as you go along
    duration(durationFromTech) {
      if (areWeCurrentlyPlayingAnAd(durationFromTech)) {
        // since we're now in an ad, return the ad duration
        // in a real example you'd calculate this based on your playlist
        // rather than hardcode a value in here
        return 30;
      } else {
        // we're playing back content, so, return that duration
        return 5 * 60;
      }
    }
  }
});

Playbackrate Adjustment - A Case Study

A simple but interesting middleware to look at is the playbackrate-adjuster. This middleware will change the times of the controls depending on the current rate. For example, if you’re playing back a 20 minute video and change the rate to 2x, the controls will adjust to display 10 minutes. Let’s take a look at the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

videojs.use('*', function(player) {
  /* ... */

  return {
    setSource(srcObj, next) {
      next(null, srcObj);
    },

    duration(dur) {
      return dur / player.playbackRate();
    },

    /* ... */
  };
});

So, here, we attach a star-middleware because we want to have it applied to any video, regardless of the MIME type. In setSource, we also call next directly with null and the srcObj because we want to use this middleware with any and all sources. We also set up our duration method to take in the duration from the previous middleware and divide it by the playback rate we get from the player.

If you look at the code you can see some other methods next to duration. They’re there to make sure other methods that rely on timing get updated. The two methods to notice are currentTime and setCurrentTime. currentTime gets called when we want to know what the current time is. setCurrentTime is called when we’re seeking. Because the user is seeking in the shifted time, we want to apply our change operation in reverse. Instead of dividing it, we want to multiply it.

1
2
3
4
5
6
7

currentTime(ct) {
  return ct / player.playbackRate();
},

setCurrentTime(ct) {
  return ct * player.playbackRate();
},

If you were to apply what we’ve done so far, you’ll notice that the nothing changes, the control bar is still showing a duration of 20 minutes. This is because as far as Video.js knows, nothing has changed. So, we need to tell Video.js that the duration has changed. We can do that by storing the tech that Video.js gives us after source selection is complete.

1
2
3
4
5
6
7
8
9
10
11

videojs.use('*', function(player) {
  let tech;

  return {
    setTech(newTech) {
      tech = newTech;
    }

    /* ... */
  };
});

And then, when the ratechange event triggers, we tell Video.js that the duration has changed and Video.js will update the controls accordingly:

1
2
3
4
5
6
7
8
9
10
11
12

videojs.use('*', function(player) {
  let tech;

  player.on('ratechange', function() {
    tech.trigger('durationchange');
    tech.trigger('timeupdate');
  });

  return {
   /* ... */
  }
});

You can see a live example here and the complete code here.