Accessible and Responsive HTML5 Video Player

In September I wrote about our progressively enhanced video player. We were proud that we’d finally got our heads around the complications of HTML5 video. But that player was a bit clunky. It had many cool features, but it also required a lot of JavaScript.

While we were working on the last video player, we came across this Accessible HTML5 Video Player. It was simple and lightweight, so I put it on my list of things to investigate after our launch. Over the last month, I finally had some time to explore this beautiful player. For what we needed, the Accessible HTML5 Video Player was an improvement on the VideoJS Player. It had a core focus on accessibility and offered support for closed captions. As we’d worked hard on transcripts for all our videos, closed captions seemed like a natural progression. It was also a bonus in that it’s written by Dennis Lembrée, whose work on Web Axe I greatly admire.

The Accessible HTML5 Video Player is fantastic, but needed some tweaks to fit in better with our site and projects. We really needed it to be responsive, so it would grow and shrink with the rest of the page layout. I made some small tweaks using Thierry Koblentz’s ‘Intrinsic Ratios for Videos,’ as I had with the previous player, making the player responsive with a 16:9 ratio. With the responsiveness, I also changed the layout of the controls so they adapted to narrower and wider viewports, with a more conventional central-button layout on wider viewports. You can see the result below:

How to create closed captions

As the HTML5 Accessible Video Player had support for closed captions, I had a good opportunity to explore how to create and implement captions on our videos. You can try them out above using the little ‘CC’ button. If your browser supports captions natively, you should get native captions. If your browser doesn’t support captions natively, you’ll get JavaScript-based captions.

Closed captions on the web require a .vtt file. The .vtt file is a simple text file that lists all the text for the captions, with time stamps telling the text when to appear on screen. Our captions file looks something like this:

WEBVTT

00:00:00.782 --> 00:00:05.000
Today, on Spyware 2.0: "Privacy"

00:00:05.100 --> 00:00:07.493
When we think of a private conversation,

00:00:07.593 --> 00:00:10.593
we think of it taking place between two people.

00:00:10.896 --> 00:00:12.380
And that's how it should be.

00:00:12.480 --> 00:00:14.547
Just between you and the person you're having

00:00:14.647 --> 00:00:16.715
the private conversation with.

00:00:16.815 --> 00:00:18.593
So it should be the same on Facebook.

00:00:18.693 --> 00:00:19.931
But is it?

You can also see the the whole of our .vtt captions file continues that way for another couple of minutes. It’s very simple, and very readable, but nobody wants to sit down and work out all those timings manually.

After working my way through a few unsuccessful web apps, I came across Subtitle Horse’s Online Subtitle/Captions Editor. Subtitle Horse allows you to upload your video in YouTube, .flv or .mp4 formats, and then has a simple and powerful (Flash-based) interface for creating captions.

Getting caption timings right

As Subtitle Horse’s Editor has keyboard shortcuts, I found the easiest way to create a caption at roughly the right time was to sit through the whole video, hitting ENTER for a new caption at the beginning of each short phrase.

After watching a lot of subtitled TV and films, I had a rough idea of what would be comfortable reading lengths. (Whole sentences would be far too long!) I also had to take into account the responsiveness of the player. If the caption was too long, it would drop on to multiple lines, often obscuring the video on narrower viewports. Some captions were an exception, where breaking a longer line up would make it harder to read as a whole.

After adding the text to each caption, I watched through the video and edited any timestamps where the timings felt wrong.

Exporting captions in the right format

Subtitle Horse exports to SRT format, which is similar to .vtt, but needs some adjustments to work correctly with web browsers.

The SRT format produced text that looks something like the following when opened in a text editor:

1
00:00:00,782 --> 00:00:05,000
Today, on Spyware 2.0: "Privacy"

2
00:00:05,100 --> 00:00:07,493
When we think of a private conversation

3
00:00:07,593 --> 00:00:10,593
we think of it taking place between two people.

1. Remove the numbers

The numbers above each timestamp aren’t needed, so first I removed those, leaving a cleaner-looking file:

00:00:00,782 --> 00:00:05,000
Today, on Spyware 2.0: "Privacy"

00:00:05,100 --> 00:00:07,493
When we think of a private conversation

00:00:07,593 --> 00:00:10,593
we think of it taking place between two people.

2. Add the file type

After saving the file as a .vtt file type, I also added the WEBVTT title to the top of the file.

WEBVTT

00:00:00,782 --> 00:00:05,000
Today, on Spyware 2.0: "Privacy"

00:00:05,100 --> 00:00:07,493
When we think of a private conversation

00:00:07,593 --> 00:00:10,593
we think of it taking place between two people.

3. Make sure the timestamp is the correct format

After testing in a few browsers, I realised that the captions were working with JavaScript, but not with native closed caption support. This was because the timestamps used commas. I removed the commas from each timestamp, and we finally had working captions!

WEBVTT

00:00:00.782 --> 00:00:05.000
Today, on Spyware 2.0: "Privacy"

00:00:05.100 --> 00:00:07.493
When we think of a private conversation

00:00:07.593 --> 00:00:10.593
we think of it taking place between two people.

How to get the Responsive Accessible HTML5 Video Player

You can download, and find all the usage instructions, for our Responsive Accessible HTML5 Video Player from our repository. I’ll be looking into fullscreen functionality, and improving support for videos that aren’t in 16:9 ratio. I also need to update all of our Indie Tech Summit videos to the new player. Any suggestions for improvements would be much appreciated.

And again, a huge thank you to Dennis Lembrée, for giving us such a solid foundation upon which I could build.