Accessible and Responsive HTML5 Video Player
7th January, 2015 —
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
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
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.