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.
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):
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.
Audio Description Format: MP3 (must be a single file, same length as video)
Preview Image Formats: JPEG or PNG
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.
Accessible to screen reader and keyboard: All controls are accessible via the keyboard alone, and buttons and controls are announced by the screen reader.
Captions and audio description: As with the previous version of JWPC, authors can easily include captions and audio description. If you don't have them, you won't see buttons for them.
Easy to configure and deploy: Web page authors of any ability will have little problem including JWPC in their pages. JWPC can be included in a web page with just a couple of script and css declarations. And all configuration options are implemented as attributes of a single HTML element.
Multiple players on a page: In contrast to the previous version of JWPC, you can now include as many players as you like on a single page. (We have tested with 10).
Full complement of shortcut keys: When you are on the player, there are shortcut keys available for all major functionality. They are available via the Help tooltip and screen reader users can review them within the block of help text that precedes the player controls.
Keyboard and screen reader access to scrubber: Not only is it easy to navigate to and operate the video time scrubber via the keyboard, but ARIA-aware screen readers will announce the time in hours, minutes, and seconds, allowing screen reader users to locate precise times within a movie.
Keyboard-accessible full-screen mode: One limitation of Flash, is that you cannot enter true full-screen without using the mouse. JWPC's Enlarge button maximizes the player within the browser window and darkens the rest of the web page to give keyboard-only users the next best thing to true full-screen. Tab key presses rotate through the enlarged player's controls.
Jump increments determined by movie length: Jump forward and back in the movie by preset percentages (5% by default). For keyboard and screen reader users, this form of navigation is more efficient that using the scrubber alone.
Volume increments screen reader accessible: Get audible indication of current volume level.
Maintain a proper heading order: JWPC injects a number of headings into each instance of the player. These non-visible headings are there so that screen reader users can easily find information about the movie and the movie controls. Web page authors can specify the level of the first heading, so that the page heading outline is maintained.
Upcoming Improvements
Some things we will be adding/improving over the next few months.
JWPC from the Cloud: Soon you will not need to install any of the player files. If your website is a .edu or .gov, you will be able to serve the JWPC files from an Amazon S3 repository that we will be hosting.
HTML5 Video: Support for reversion to HTML5 video and fallback to video only, for systems that can render only the raw video file
Mobile: Though the current version plays on Android devices that support Flash, Apple iOS and other non-Flash capable mobile devices will also be supported.
Interactive Transcripts: Search for a word or phrase in the video then click on a caption segment and go to that point in the video.
Playlists: Coming versions will support accessible playlists, which will help facilitate, among other things, breaking longer, instructional videos into chapters/sections.
Indication of Download Progress: Visual indication of how much of the currently playing video has downloaded when using progressively downloaded (non-streamed) video, so it is easier to judge how far forward you can scrub or skip.
Programmatic Instantiation: The option to set up your video configurations in the head of the document.