Accessible Web Video: JW Player Controls, Version 2

JW Player Controls (JWPC) is Longtail Video's JW Player Flash-based video player, with customized plug-ins, wrapped with controls from the Dojo Toolkit.

The primary goals of JWPC are high accessibility and ease of deployment. The JWPC widget is keyboard and screen reader accessible and supports captions and audio description. It can be placed in a web page by setting a few attributes on a DIV element.

Contents

Basic Set Up

1. Download the player.

2. Unzip the files and put the following lines in the head of a document on your web server, correcting paths to the files as necessary (code can be copied from test.html in the downloaded package):


<link rel="stylesheet" href="jwpc/themes/base/jwpc.css">
<link rel="stylesheet" href="jwpc/themes/mycss.css"> <!-- optional -->

<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad:true"></script>
<script src="jwpc/jwpc.js"></script>

3. Put the following DIV where you want the player to display, and correct the attributes as appropriate to your video and supporting files:


<div dojoType="jwpc.jwpc" 
    jwpc_plugins="/my/plugins/jwpc/plugins"

    jwpc_videolength="0:02:14"
    jwpc_videofile="/my/media/skate-or-die.mp4"
    jwpc_videowidth="320"
    jwpc_videoheight="240"

    jwpc_captionfile="/my/media/skate-or-die.xml" 
    jwpc_audiodescfile="/my/media/skate-or-die.mp3" 
    jwpc_previewimage="/my/media/skate-or-die.png"
    jwpc_videotitle="Skate or Die! and Grolier Electronic Encyclopedia">

  <noscript>You must have the Flash Plugin installed and JavaScript enabled to play this movie.</noscript>
</div>

That's all there is to it. Full configuration information and details for developers are covered in the readme file.

The example code above demonstrates the basic attributes available. Duration, video file, and plugins location are always required. We also include optional captions and audio description files. A preview image is always nice to have. The video title is included in the screen reader readable heading that precedes the player controls. If you do not specify a width and height, the size defaults to 320 by 240 pixels.

This player accepts the following media formats:

Below are a couple of videos using variations of the above code samples:

Video Sample 1

(Hear audio descriptions at 0:28 and 2:26 for examples of that capability.)

Video Sample 2

Some Features of JWPC

Right now, JWPC works only in browsers that support Flash (reversion to HTML5 video is coming soon). JWPC uses HTML-based controls to get around problems with Flash video players that may be encountered by keyboard-only and screen reader users, in particular, problems with getting focus to or getting “trapped” in Flash applications and issues with navigability and readability screen reader users may face in Flash.

Upcoming Improvements

Some things we will be adding/improving over the next few months.

Info on Captioning and Audio Description

We have some tips on captioning and producing audio descriptions to get you started. The tips are skewed toward use of JWPC but have application to captioning and audio describing, generally, as well.

Previous Version of JWPC

We are maintaining a link to the previous version of JWPC, in case you need it for any reason.

Feedback

If you use JWPC or have a comment or suggestion, we would love to hear from you. Send an email to wac@osu.edu.