videojs-vr Is Now Under The Video.js Org

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 released

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

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

Bug Fixes

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

Chores

Documentation

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

Tests

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

Video.js 6.5.0 Release

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!
    before the change
    after the change
  • 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

Raw Changelog

6.5.0 (2017-11-17)

Features

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

Code Refactoring

Documentation

Performance Improvements

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

Tests

Video.js 6.4.0 Release

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

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

Code Refactoring

Documentation

Tests

Video.js 6.0 Release!

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.

Feature Spotlight: Middleware

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.

Video.js removes Flash from core player

In August of 2016, we announced our intention of removing Flash as a part of the core Video.js project.
As Html5 video becomes the standard playback tech and Flash fades into obsolescence, it is time
to remove Flash from the core player and move it to a separate code base. This will give us the ability
to allow developers to continue to support legacy browsers by adding the tech themselves, while allowing
us to minimize legacy code in Video.js and decrease the footprint of the player.

This follows in the footsteps of Chrome, Safari and Firefox which are all taking steps to deprecate Flash.

Chrome: Chrome 56 disables flash by default

Safari: Safari makes Flash a legacy plugin

Firefox: Reducing Adobe Flash Usage in Firefox

As of the Video.js 6.0 release, the dream of a Flashless future will come closer to a reality.

In the meantime, the separate videojs-flash project has been created for Flash tech support.
When the videojs-flash plugin is added to the player, the Flash tech is added to the tech order.

1
2
3
4
5
6
7
8
9
10
11
<link rel="stylesheet" href="path/video.js/dist/video-js.css">
<script src="path/video.js/dist/video.js"></script>
<script src="path/videojs-flash/dist/videojs-flash.js"></script>

<video id='vid' class='video-js' controls height=300 width=600>
<source src="video.mp4" type="video/mp4">
</video>

<script>
var player = videojs('vid');
</script>

Feature Spotlight: Accessibility

Accessibility! The most important feature you never knew about.

In the Video.js organization we try hard to have good accessibility. Like most other software, any change can affect the system in unintended ways. For example MuteToggle and VolumeControl were married into VolumeMenuButton in Video.js 5. While this change did allow these controls to work in tandem visually, it also did something unintended. It broke accessibility. In this post we will go over what broke, what the fix was, what accessibility is, and how to test and make sure it works.

Feel free to skip to the last section if you already know what accessibility is.

Accessibility? What’s that?

Accessible software has support for users with vision, hearing, movement/dexterity, or other impairments. It also helps users that want to use the keyboard to navigate. Out of the box web applications have some accessibility due to the nature of HTML, but this is only the case if you are using native elements in intended ways. If you cannot use native DOM elements, like <button>, and instead must use a <div> for buttons, then you need worry about accessibility in your page.

Supporting users with hearing impairment is not something that we can do directly for the users of Video.js. Instead we must indirectly support these users by adding support for captions in videos. In Video.js we have had support for captions and subtitles for some time, internally they are called TextTracks. In fact Video.js has had support for WebVTT format TextTrack, which is much more accessible, since version 4.

Supporting users with vision impairment is harder, but partly in our control. To support this group of users our player must be accessible to screen readers. A screen reader is an application that reads elements off of the screen to the user (as the name implies). On top of reading from the screen it also allows the user to interact with the page using only the keyboard or specific gestures on a touchscreen (without using a mouse or needing to directly touch visible items). HTML has certain rules that must be followed so that a page can be accessible. We will go over the basics of these rules in the next section. Screen readers are further supported by having description tracks that can be read out during video playback. Description tracks are a sub-type of TextTrack, and as previously stated we cannot automatically add them to videos, we can only have support for them in the Video.js.

See the resources section at the end of this post for a list of screen readers.

How do you make a web application screen reader accessible?

If you use the native elements for the purposes that they were intended, you will already have most of the work done.This is why the use of the native element is the recommended way to make anything accessible for a screen reader. For instance if you use a <button> element you will get the following accessibility attributes (without them actually being on the button):

  • tabIndex which allows users to tab to the button
  • role="button" which tells the screen reader that this is a button
  • The space and the enter key will both press the button

In some cases, such as in Video.js, it will not be possible to use the native <button> element. You will have to mimic the accessible functionality from the list above and use a div. Here is a list of what you will have to add:

  • You have to add the role="button" attribute to classify it as a button.
  • You have to add a tabIndex which will allow the div to be navigated to using the tab key
  • You have to add handling for the space and enter key that press the button

A list of role attribute values can be found on Mozilla Developer Network.

After mimicking or adding native accessibility on the controls and content in your webpage, the next thing to look over are aria attributes. For instance, we use aria-live="polite" for our ProgressBar slider. By default aria-live is set off, which means updates to controls should not be read to the user unless they un-focus and re-focus an element. The value of polite which we use allows us to convey the position of the slider to screen reader without them having to change focus on the control. This is useful because the ProgressBar is always updating while a video is playing. A value of polite will also wait to convey said updates until the screen reader is done reading other information to the user.

For a more complete list of ARIA attributes see the specification.

Finally you need to add an accessible “name” to an element so that it can be referred to. A good example of this is can be seen in the MuteToggle control. Since it is not a simple “button” we include innerHTML/innerText of “Mute” or “Unmute” in a way that is hidden from most users but announced to screen readers. In Video.js we refer to the accessible name and the action that a control performs as “control text”. Control text also updates the title attribute of an element in most cases, which is important for visual accessibility. When the action the a control performs changes so does the control text. This will allow the screen reader to refer to the MuteToggle as “Mute Toggle” rather than “button”. It will also convey the current action of the MuteToggle. In this case that will be either “Mute” or “Unmute” depending on what the button would do when pressed (ie the state of the button).

Here are some examples of accessibility straight from Video.js:

  • The MuteToggle <button>:
    • Has aria-live set to polite, rather than the default value of off. aria-live with any value other than off indicates that innerText/innerHTML updates can be sent to the screen reader without the user needing to move focus off of the control. The value of polite means that the screen reader should wait until it is done speaking to convey these updates to the user.
    • Has control text of “Mute” or “Unmute” which indicates the current status of the button to the use
  • The VolumeBar slider <div>:
    • Has a role attribute with a value of slider. Like this: role="slider"
    • Has a tabIndex attribute as it is not a native control element
    • Has EventHandlers that listen for:
      • The up and right arrow keys to increase the volume and the slider percentage
      • The down and left arrow keys to decrease the volume and the slider percentage
    • Has aria-label of “volume level” which is an accessible label that the screen reader will use to refer to it
    • Has aria-valuenow and aria-valuetext properties that update to indicate the current volume level (so the screen reader can read it)
    • Has aria-live set to polite, rather than the default value of off. aria-live with any value other than off indicates that innerText/innerHTML updates can be sent to the screen reader without the user needing to move focus off of the control. The value of polite means that the screen reader should wait until it is done speaking to convey these updates to the user.

The problem and the solution

Now let’s talk about how screen reader accessibility broke in Video.js 5. First VolumeMenuButton replaced MuteToggle and VolumeControl on the ControlBar. VolumeMenuButton was set to mimic MuteToggle when clicked. It would also show the VolumeControl on mouseover or focus. This was a problem because a VolumeControl was a now a child of a button, and buttons should not contain other controls. To the screen reader and to the DOM there are two MuteToggle button controls. When visually there is a VolumeControl and a MuteToggle. Below you can see a gif of this behavior in action :

macOS `VoiceOver` Before The Fix

The solution to this problem was to use a regular div to house the MuteToggle and VolumeControl. This regular div would have no role or control text so that it would be invisible to a screen reader. From that point forward we just needed to mimic the old UI. For those who are wondering, this new Component is called the VolumePanel. See the new behavior in a gif below:

macOS `VoiceOver` After The Fix

Outlines

Another big accessibility fix for controls comes from the removal of one small css rule:

1
outline: none;

Why did we do it? With feedback from the community and external resources, we learned that outlines should always be on. Without outlines there is no visual indication of keyboard focus on control elements and without that, keyboard users who are not visually impaired have a hard time using the controls.

Wrap up

Hopefully this post has given you some insight into making a web application accessible. If you find any issues or have any suggestions for our accessibility or in general feel free to contribute to Video.js.

If you want to keep up to date on the current state of accessibility work see the a11y label on PRs and issues.

Resources

Here are some popular screen readers that are actually used in the wild:

Resources for learning more about web accessibility:

Feature Spotlight: Advanced Plugins

Note: Advanced plugins are being introduced in Video.js 6.0 and are only supported from that version forward.

If you’ve been a Video.js user for a while, you’re likely familiar with the concept of plugins: functions that become methods of any player you create. If you’re not familiar with Video.js plugins, we have a comprehensive plugins guide available.

These plugins - which we’ll call basic plugins - are lightweight and offer complete control of the player. That’s really useful and it isn’t changing - existing plugins should continue to work!

But what if you want a richer set of features? Or more guidance on how to structure your plugin? Or more tools out of the box that help manage complex plugin-rich players?

Well, until Video.js 6.0, you had to figure things out on your own.

Introducing Advanced Plugins

One of Video.js’ strengths is its rich ecosystem of plugins; so, in the last few months, we wanted to focus our efforts on improving the plugin author experience.

While projects like the plugin generator and videojs-spellbook make becoming a plugin author easier than ever, the Video.js team thought it was important to provide a foundational API and set of conventions on which the future of Video.js plugins could be built.

Our solution is advanced plugins.

Advanced Plugins are Component-Like

One of the design goals for advanced plugins was to provide an API that was reminiscent of the existing components system. We achieved this in a number of ways.

At the lowest level, this included a name change for the plugin registration function from videojs.plugin to videojs.registerPlugin (taking a naming cue from videojs.registerComponent and videojs.registerTech).

Beyond a simple registration method name change, advanced plugins are class-based. A trivial example of an advanced plugin might look something like this:

1
2
3
4
5
6
7
8
9
10
const Plugin = videojs.getPlugin('plugin');

class HelloWorld extends Plugin {
constructor(player) {
super(player);
this.player.addClass('hello-world');
}
}

videojs.registerPlugin('helloWorld', HelloWorld);

This plugin can be initialized in the same way as a basic plugin - via a player method whose name matches the registered name of the plugin.

In the case of advanced plugins, this method is a factory function, which instantiates the plugin class and returns an instance.

It’s useful to know that the player method that is created will always be a function. If a player already has an instance of an advanced plugin, its associated method will simply return the pre-existing instance rather than re-initialize it:

1
2
3
4
5
const player = videojs('my-player');
const instance = player.helloWorld();

// Logs: 'true'
videojs.log(instance === player.helloWorld());

The helloWorld method will return this plugin object until it is disposed - after which it will create a new plugin instance again.

Events

Similar to components, advanced plugins can listen to and trigger events via the on, one, off, and trigger methods.

This provides a loosely coupled communication channel for plugins and other objects (components, players, etc) to manage their own state and respond to changes in the state of one another.

Additional Event Data

The Video.js event system allows additional data to be passed to listeners as a second argument when triggering events (the first argument is the event object itself).

Plugin events pass a consistent set of properties in this object (including any custom properties passed to trigger):

  • instance: The plugin instance, which triggered the event.
  • name: The name of the plugin as a string (e.g. 'helloWorld').
  • plugin: The plugin class/constructor function (e.g. HelloWorld).

For example, a listener for an event on a plugin can expect something like this:

1
2
3
4
5
6
7
8
9
10
11
const player = videojs('my-player');
const instance = player.helloWorld();

instance.on('some-custom-event', (e, data) => {
videojs.log(data.instance === instance); // true
videojs.log(data.name === 'helloWorld'); // true
videojs.log(data.plugin === videojs.getPlugin('helloWorld')); // true
videojs.log(data.foo); // "bar"
});

instance.trigger('some-custom-event', {foo: 'bar'});

Lifecycle

Another similarity between plugins and components is the concept of a lifecycle - more specifically, setup and teardown processes.

We get the setup feature as a side effect of normal object creation in JavaScript, but we are left to our own devices when it comes to object destruction and ensuring that references between objects are cleaned up to avoid leaking memory.

Video.js components have long had a dispose method and event that deal with removing a component from the DOM and memory. Advanced plugins have the same feature:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const player = videojs('my-player');

const firstInstance = player.helloWorld();

// Logs: 'true'
videojs.log(firstInstance === player.helloWorld());

firstInstance.on('dispose', () => videojs.log('disposing a helloWorld instance'));

// Logs: 'disposing a helloWorld instance'
firstInstance.dispose();

const secondInstance = player.helloWorld();

// Logs: 'false'
videojs.log(firstInstance === secondInstance);

The pluginsetup Event

Plugins do have one lifecycle feature that components do not: the pluginsetup event.

This event is triggered on a player when a plugin is initialized on it:

1
2
3
4
5
6
7
8
9
10
const player = videojs('my-player');

player.on('pluginsetup', (e, hash) => {
if (hash.name === 'helloWorld') {
videojs.log('A helloWorld instance was created!');
}
});

// Logs: 'A helloWorld instance was created!'
player.helloWorld();

React-inspired Statefulness

One of the exciting additions in Video.js for both advanced plugins and components is React-inspired statefulness. Essentially, this means that all plugin objects and component objects have a state property, which is a plain object that can be used to store variable state for that object. Then, there is a setState method that updates this object and triggers a statechanged event.

This system allows plugins and components to use their evented nature to communicate in-memory state changes through a consistent API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// A static property of the constructor can be used to pre-populate state 
// for all instances.
HelloWorld.defaultState = {color: 'red'};

const player = videojs('my-player');
const instance = player.helloWorld();

instance.on('statechanged', (e) => {
const {color} = e.changes;

if (color) {
videojs.log(`The helloWorld color changed from "${color.from}" to "${color.to}"!`);
}
});

// Logs: 'The helloWorld color changed from "red" to "blue"!'
instance.setState({color: 'blue'});

Player Plugin Awareness

Finally, we couldn’t add new plugin infrastructure without working on one of the more pernicious problems of managing complex combinations of plugins: the player can’t report which plugins it has initialized - or not. To this end, the player has two new methods: hasPlugin and usingPlugin. These methods work for both types of plugins.

The hasPlugin Method

This method reports whether a plugin matching a given name is available on the player:

1
2
3
4
5
6
7
const player = videojs('my-player');

// Logs: 'true'
videojs.log(player.hasPlugin('helloWorld'));

// Logs: 'false'
videojs.log(player.hasPlugin('fooBar'));

This method ignores whether or not the plugin has been initialized and merely reports whether or not it has been registered.

The usingPlugin Method

This method reports not only whether a plugin is available on a player, but whether it is currently active on the player:

1
2
3
4
5
6
7
8
9
const player = videojs('my-player');

// Logs: 'false'
videojs.log(player.usingPlugin('helloWorld'));

player.helloWorld();

// Logs: 'true'
videojs.log(player.usingPlugin('helloWorld'));

One caveat to note here. While this works for both types of plugins, only advanced plugins can change this value more than once. A basic plugin has no built-in lifecycle or events; so, it’s not possible to determine whether one has been “disposed”.

Go Forth and Code

We hope these additions and improvements to the plugin architecture will make writing Video.js plugins more pleasurable and remove some of the low-level legwork involved in ensuring plugins aren’t creating memory leaks and other problems.

The design of advanced plugins is such that we can add features as 6.0 matures and we get more community feedback. As always, we strongly encourage our users to give back to the Video.js project in whatever way they can.

For a more complete discussion of plugins generally, visit the Video.js plugins guide.

Video.js 6.0.0-RC.0: The first Release Candidate

The first Release Candidate for 6.0 has been released

Last week, we began wrapping up months of effort to make Video.js even better with the first Release Candidate (RC) of Video.js 6.0. In order to make it better, however, we had to make a few breaking changes and we also made a lot of improvements under the hood.

How to try it out

The RC is now published on npm under the beta tag with verion 6.0.0-RC.0.

1
npm install video.js@beta

Please try it out and let us know how it is on GitHub.

What to look forward to

  • We’re finally removing Flash from core as outlined in a previous post.
  • Plugins are being updated to a React-inspired component architecture. The old style is staying around.
  • We’re recommitting to accessiblity by fixing the accessibilty of our volume control and bringing back outlines!
  • Middleware. A brand new feature to interface between Video.js’s techs and the player.

Feature Spotlights

Over the coming weeks, we’ll post feature spotlights talking about the big things that are happening.
We might also revisit some old features.