Multimedia player

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.

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.

Required Elements

1. Each media must be placed in its own <figure> using the "wet-boew-multimedia" class:

   <figure class="wet-boew-multimedia">

2. Each container should contain one <video> or <audio> tag.

   <source src="http://hebergement-hosting.ca/hosting/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.).

3. Finally, if using the <video> tag, you must include the <track> tag, which provides captions for the video:

   <track src="mediaplayer-transcript_captions-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />

   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.

<figure class="wet-boew-multimedia">
	<video width="480" height="270" poster="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/thumbnail.png" title="Small Aircraft Passenger Guidelines">
		<source src="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/demo-eng.webm" type="video/webm" />
		<source src="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/demo-eng.mp4" type="video/mp4" />
		<track src="mediaplayer-transcript_captions-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
	</video>
	<figcaption>
		<p>Small Aircraft Passenger Guidelines (<a href="mediaplayer-transcript_captions-en.html">Transcript</a>)</p>
	</figcaption>
</figure>

<figure class="wet-boew-multimedia">
	<audio title="Ride of the Valkyries">
		<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>
	<figcaption>
		<p>Ride of the Valkyries</p>
	</figcaption>
</figure>