Feb
22
2011

The Brightcove Accessible Video Player

Late last year I helped to allow the Brightcove player to be 508c compliant. This basically required enhancements in the following areas:

  • Keyboard navigation
  • Closed captions
  • Screenreader integration

For keyboard navigation, many of our UI components were modified to accept keyboard input and we added management for tabbing through multiple screens of data, viewstacks and dynamic controls that could be added/removed through the API and binding.

Closed captions support was something already available in the player through the API, but we expanded the capabilities and built a special plugin that could be loaded into the player to manage requests for DXFP files and population of a drop down menu of captions options based on the file.

Screenreader support enabled the player controls and closed captions to be surfaced to the latest JAWS screenreader. Lots of quirks with integrating with a screenreader for different browsers and OS versions, but that is a topic for another day…

One thing we are always very concerned about at Brightcove when we release anything new in our player is the matter of backwards compatibility, and so for this accessible implementation it was decided to leave our current templates as they were and release a new template that would specifically enable the accessible functionality, and we would also provide controls through BEML that would allow customers to easily create their own accessible implementations.

Now, to be clear, the accessible capabilities are available in ALL Brightcove players, but to enable this functionality you need access to the underlying BEML. In this way, we could provide support in all types of template without forcing the functionality into older templates (with older BEML). For those without access to BEML, we built the Accessible Video Player as a global template that could be accessed by anyone.

I hope to write a future post about how to build your own accessible template through BEML, but for this post I wanted to discuss the issue of Brightcove Express customers, who do not have access to BEML, wanting to deploy fully accessible players. You see, although an Express customer can create instances of the Accessible Video Player and immediately have keyboard navigation and screenreader integration in these players, closed captions is something that requires a bit more work to enable.

BUT IT CAN BE DONE.

Sorry for the extra stress there, but I think this point has been confused since the player’s release, when I have seen people cite the accessible player as only being available to non-Express customers because of the closed captions limitation. Yes, there is a limitation, but it can be overcome, and this template can be used by any customer to get fully accessible functionality.

At this time Brightcove does not ingest or host closed captions files. There is no built in mechanism for associating a captions file with a video. The way the closed captions support for the Accessible Video Player was implemented requires the use of a custom field in the Brightcove Studio to create this association. The closed captions plugin looks to this custom field for the path to the DFXP file for the current video.

However, custom fields is a feature available to non-Express customers only, so an Express customer can not use the closed captions plugin in this way. It is because of this that there has been confusion about accessibility support for Express customers. All it really means, though, is that the default plugin cannot be used. There is no stopping anyone from modifying it, though.

As I mentioned, the plugin looks to the custom field on the video to determine from where to load the DFXP file. By modifying the plugin to use different logic to determine the path you can have a fully accessible player as an Express customer as well.

The source for the plugin is here. The lines that determine the path to the DFXP file are the following:

1
2
3
var video:VideoDTO = mVideoPlayer.getCurrentVideo();
if (video && video.customFields.hasOwnProperty("dfxppath")) {
    mCaptionsModule.loadDFXP(video.customFields.dfxppath, video.id);

Now, what could you change this to? Here are some ideas:

  • Have a server side script that accepts a video ID and redirects to the DFXP file based on this ID. The server side script would change based on desired language and how the file was looked up, but the ActionScript would be as simple as:
1
2
3
var video:VideoDTO = mVideoPlayer.getCurrentVideo();
if (video) {
    mCaptionsModule.loadDFXP("http://domain/script?id=" + video.id, video.id);
  • Store all DFXP files in a known location using a standard naming convention based on the video ID, then you could request the file directly in the following manner:
1
2
3
var video:VideoDTO = mVideoPlayer.getCurrentVideo();
if (video) {
    mCaptionsModule.loadDFXP("http://domain/path/captions" + video.id + ".dfxp", video.id);
  • Put the path to the DFXP file in the player snippet in the following manner:

<param name=”dfxppath” value=”http://domain/path/file.dfxp” />

Then you can access the file path through the player API with:

1
2
3
4
var video:VideoDTO = mVideoPlayer.getCurrentVideo();
var path:String = mExperienceModule.getPlayerParameter("dfxppath");
if (video && path) {
    mCaptionsModule.loadDFXP(path, video.id);

These are just three ideas, but hopefully they demonstrate that with only a slight change to the plugin you can reuse it for however you store your DFXP files, whether you are an Express customer or not, making the Accessible Video Player one that is available to all Brightcove customers.

  • Share/Bookmark

2 Responses to “The Brightcove Accessible Video Player”

  1. “I hope to write a future post about how to build your own accessible template through BEML”

    Please do!

  2. Thanks for this, Todd. I’ve (finally) added this to Brightcove’s user docs at http://support.brightcove.com/en/docs/using-closed-captions-without-custom-fields

Leave a Reply