Multimedia player - nschonni/wet-boew GitHub Wiki

This feature provides a multimedia player for embedding accessible video and audio into web pages.

Table of Contents Overview Purpose Rationale Implementation Media Formats Compatible Formats Required Elements Example Code Video Audio Development Known Issues Future Version History Related Pages

Overview

Project Lead: Laurent Goderre (@LaurentGoderre)

The multimedia player allows developers to easily embed audio or video files into their pages, and helps to achieve WCAG 2.0 compliance when providing such media. The media player enhances the HTML5 <video> and <audio> tags, and provides a polyfill utilizing the Flash player for browsers that do not support such tags.

Purpose

The purpose of this feature is to help ensure video and audio media embedded on websites meet WCAG 2.0 requirements.

Rationale

There are no media player plug-ins currently available that are fully keyboard accessible, meaning that some or most video player functions can only be accessed using a mouse. The WET media player ensures all player functions are tab focus-able and can be triggered via the Enter key.

Implementation

The media player requires the use of a few HTML5 tags and a link to the media source you wish to embed.

Media Formats

The media player supports several formats, listed below; however, we recommend at a minimum you provide any video media in MPEG4 (using the H264 and AAC codecs) to be able to reach every audience, as all mobile players and most browsers are able to play this format. We also recommend you provide media in the WebM format (using the VP8 codec) in addition to MPEG4 in order to take advantage of native browser support, for example FireFox.

Compatible Formats

Video: MPEG4(H264+AAC), WebM(VP8)
Audio: MP3, Ogg Vorbis
Captions: TTML, HTML5 Data

Required Elements

Each media must be placed in its own <div> using the "wet-boew-multimedia" class:
```
<div class="wet-boew-multimedia">
```
Each container should contain one <video> or <audio> tag.
The <video> or <audio> tag should contain at least one <source> tag with a link to the media source:
```
<source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.mp4" type="video/mp4">
```
Note: You may list multiple sources for the video, the player should play the first source that works (is available, compatible... etc.).
Finally, if using the <video> tag, you must include the <track> tag, which provides captions for the video:
```
<track kind="captions" data-type="text/html" src="mediaplayer-transcript_captions-eng.html"></track>
```
Note: If you are using the <audio> tag, you must include a link to a transcript of the audio file on the page.
The media player accepts two formats for the captions specified by the data-type property. Those are: application/ttml+xml specified by the W3C and text/html developed for WET.

Note: To take advantage of responsive-design, ensure that the video is placed in a container that leverages the grids functionality.

Example Code

The working examples are located here.

Video

Video Example

<div class="wet-boew-multimedia span-4">
	<video width="480" height="270" poster="http://31591.vws.magma.ca/sct-tbs/wet-boew/thumbnail.png" title="Video Example">
	    <source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.webm" type="video/webm">
	    <source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.mp4" type="video/mp4">
	    <track kind="captions" data-type="text/html" src="mediaplayer-transcript_captions-eng.html"></track>
	</video>
</div>

Audio

Audio Example

<div class="wet-boew-multimedia span-4">
	<audio title="Audio Example">
	    <source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries.ogg" type="audio/ogg">
	    <source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3">
	</audio>
</div>

Development

Branch: feature-multimedia-player

The multimedia player is dependent on the progress bar polyfill.

The code for the multimedia player is located in several places within the source folder of WET:

js/workers/multimedia.js - contains the JavaScript code for the multimedia player
js/sass/includes/_multimedia.scss - contains the CSS for the multimedia player
js/sass/includes/_multimedia-ie7.scss - contains the IE7 specific CSS for the multimedia player
js/bin/multimedia.swf - contains the fallback flash player for when the browser does not natively support the video.
Note: the code for the flash player fallback can be found in the wet-boew-multimedia-fallback repository.

Known Issues

There are no known issues at this point in time. If you find one, please contribute by filing an issue.

Future

Requested features and options that will be added in future patches:

Volume Control
Expand to Fullscreen