Accessible Video in WordPress

Accessible Video Library post creation screen

Since version 3.6, WordPress has incorporated the MediaElementJS library in core to handle the output of video files. It’s a great library — it has support for captions and subtitles; support for chapters; support for fallback formats of video; support for YouTube; keyboard support — everything you’d want to have for displaying video accessibly.

That’s totally exciting!

But there’s a “but”.

WordPress manages media through the media manager, which doesn’t offer any way to associate caption and subtitle files with the videos. The video shortcode doesn’t offer an attribute to provide access to a caption or subtitle file. Because the video shortcode exits automatically if there’s no video file found, either referenced through an attribute or attached to the current post, it’s not possible to use MediaElements with YouTube.

You can use oEmbed to get a YouTube video, and that comes with caption support if your YouTube video is captioned — but the keyboard accessibility of the embedded YouTube player is pretty wretched, so that’s not the ideal solution. (Also, the closed captioning icon doesn’t display until after you hit play. That’s just weird.)

So, I’ve written a new Accessible Video Library WordPress plug-in, intended to handle all these situations. It creates a custom post type, and introduces a variety of meta fields so that you can upload your captions and subtitles and reference a YouTube video, but use the MediaElementJS video player.

Because the video player is baked into core, this should have great, reliable support – and I hope not to run into a lot of plug-in and theme conflicts. Using core features is generally a great way to avoid that kind of thing, as long as plug-ins and themes are behaving well.

By default, Accessible Video Library only offers support for a limited number of video formats and subtitle languages. (Captions are assumed to always be in the native language of your site.) However, I set it up so that it’s very easy to add your own custom formats and languages. If I’d created upload fields for every possible language, this would be unmanageable, so it’s important that people can upload their own versions.

All of these customization are done via a single WordPress filter, avl_add_custom_fields.

Here’s a simple example of this filter in use, adding one additional video field and one additional subtitle field:


add_filter( 'avl_add_custom_fields', 'your_function_add_formats' );
/** 
* Filter to insert or remove fields.
* @return array Array of all post meta fields shown with video library post type.
*
**/
function your_function_add_formats( $fields ) {
	$fields['de_DE'] = array( 'label'=>'German Subtitles (SRT)', 'input'=>'upload', 'format'=>'srt','type'=>'subtitle' );	
	$fields['mov'] = array( 'label'=>'Video (.mov)', 'input'=>'upload', 'format'=>'mov','type'=>'video' );	
	return $fields;
}

The plug-in also supports text fields and select fields, if those become needed, but the basic format for a new field is to define an array with the label, the input type, the file format you’ll be uploading, and the generic type of document – subtitle or video. Using that simple filter, you can add support for whatever languages or video formats you need!

I hope that people find this plug-in useful – please, download Accessible Video Library and give it a try!

Have something to contribute?




« Read my Comment Policy

2 Comments to “Accessible Video in WordPress”

  1. This is great, we’ve been having several video issues with one of our client’s WP sites. It’s crazy it took them this long to incorporate a video solutions. As soon as we get a subtitle request, we’ll be sure to install your plug-in – sounds great.

  2. Excellent work Joe. I going to try this out very shortly and I’ll let you know how I get on.