Multimedia Player
Purpose
Provides an accessible multimedia player for embedding video and audio into web pages.
Examples
How to implement
The multimedia 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 multimedia player must be placed in its own
<figure>using thewb-mltmdclass:<figure class="wb-mltmd"> - Each container should contain one
<video>or<audio>tag. -
Optional: Add a "Share this video" or "Share this audio file" link by adding the following to the
figureelement:data-wb-mltmd='{"shareUrl": "url"}' -
Add a
figcaptionelement to thefigureelement with the title of the video or audio file. If a transcript is required, then also include either a link to the transcript or a details/summary containing the transcript.<figcaption> <p>Looking for a Job</p> </figcaption><figcaption> <p>Looking for a Job (<a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p> </figcaption><figcaption> <details id="inline-captions"> <summary>Looking for a Job - HTML5 Transcript/Captions</summary> <p class="wet-boew-vd"><strong>(Animated pen draws a red line that leads into the text Looking for A Job)</strong></p> <p class="wet-boew-vd"><strong>(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)</strong></p> <p><span class="wb-tmtxt" data-begin="2.50s" data-dur="3.84s">Hi, my name is Eric, and I'm a Service Canada employee.</span></p> ... </details> </figcaption>
Video
- Add a
posterattribute to thevideoelement with the value being the URL for the thumbnail image. - Add a
titleattribute to thevideoelement with the value being the title of the video. -
Add one or more
sourceelements to thevideoelement with thesrcattribute value being the URL of the media file and thetypeattribute being the media file MIME type.
Note: If you list multiple media sources for the video, the player will play the first media source file that works (is available, compatible, etc.).<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" /> <source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" /> - Add a
trackelement withkind="captions"to thevideoelement to add captions.-
Add the
srclangandlabelattributes to thetrackelement to identify the captions language.<track srclang="en" label="English" /> - Add the
srcanddata-typeattributes to thetrackelement to identify the source of the captions.- Timed Text Markup Language:
data-type="application/ttml+xml"andsrcis the URL of the Timed Text Markup Language captions file. - HTML captions file:
data-type="text/html"andsrcis the URL of the HTML captions file. - Inline HTML captions:
data-type="text/html"andsrcis the URL of the inline HTML captions (e.g.,src="#inline-captions".
- Timed Text Markup Language:
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" /> -
Add the
- Optional: Add buttons to link to cue points within your video.
- Add a
buttonelement within thefigurecontainer. - Specify the cue point in seconds (ex. 75s) or time notation (01:15)
<button class="btn btn-info cuepoint" data-cuepoint="75s">Cue point - 75s</button><button class="btn btn-info cuepoint" data-cuepoint="01:15">Cue point - 01:15</button> - Add a
Code
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://youtu.be/p2-1ZIHu1W0"}'>
<video poster="http://www.servicecanada.gc.ca/eng/video/images/te-lj-eng.jpg" title="Looking for a Job">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<button class="btn btn-info cuepoint" data-cuepoint="75s">Cue point - 75s</button>
<figcaption>
<p>Looking for a Job (<a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p>
</figcaption>
</figure>
Video (YouTube)
- Add a
titleattribute to thevideoelement with the value being the title of the video. - Add a
sourceelement to thevideoelement withtype="video/youtube"and thesrcattribute being the URL of the video.<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" /> - If captions are not already included for the video, add the captions using the tools provided by YouTube.
Code
<figure class="wb-mltmd">
<video title="Suspect">
<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect</p>
</figcaption>
</figure>
Audio
- Add a
titleattribute to theaudioelement with the value being the title of the audio. -
Add one or more
sourceelements to theaudioelement with thesrcattribute value being the URL of the media file and thetypeattribute being the media file MIME type.
Note: If you list multiple media sources for the audio, the player will play the first media source file that works (is available, compatible, etc.).<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" /> <source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg" />
Code
<figure class="wb-mltmd">
<audio title="Ride of the Valkyries">
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.ogg" type="audio/ogg" />
</audio>
<figcaption>
<p>Ride of the Valkyries</p>
</figcaption>
</figure>
Configuration options
| Option | Description | How to configure | Values |
|---|---|---|---|
shareUrl |
Adds a "Share this video" or "Share this audio file" link | Add to the element with class="wb-mltmd". |
|
Events
| Event | Trigger | What it does |
|---|---|---|
wb-init.wb-mltmd |
Triggered manually (e.g., $( ".wb-mltmd" ).trigger( "wb-init.wb-mltmd" );). |
Used to manually initialize the multimedia player. Note: The multimedia player will be initialized automatically unless the multimedia player markup is added after the page has already loaded. |
wb-ready.wb-mltmd (v4.0.5+) |
Triggered automatically after a multimedia player initializes. | Used to identify which multimedia player initialized (target of the event)
|
wb-ready.wb (v4.0.5+) |
Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
|
Source code
- Date modified: