Multimedia Player - Video
Overview
For video, the multimedia player leverages the native HTML5 video tag. The MPEG 4 format (H264 codec) is the minimum requirement for video because it is the standard video format on many browsers. An optional but highly recommended format, Webm (VP8 codec), should be added as well to allow some browsers such as Firefox that do not include native support for H264 to leverage the native HTML5 performance gains.
The multimedia player's timeline relies on the HTML5 progress element and uses a polyfill when the element is not supported.
Examples
All video examples use native HTML5 video on most modern browsers including Firefox 6+, Google Chrome 3+ and Edge.
MPEG4 (H264 + AAC) and WebM (VP8) source with HTML captions
Looking for a Job (Transcript)
View code
In-page HTML
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
<video poster="demo/video1-en.jpg" title="Looking for a Job">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<figcaption>
<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
</figcaption>
</figure>cpts-lg-en.html
<div id="inline-captions">
<section>
<h2>Transcript</h2>
<p class="wb-vd"><strong>(Animated pen draws a red line that leads into the text Looking for A Job)</strong></p>
<p class="wb-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>
...
</section>
</div>MPEG4 (H264 + AAC) and WebM (VP8) source with TTML captions
Training and Development (Transcript)
View code
In-page HTML
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
<video poster="demo/video2-en.jpg" title="Training and Development">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4" />
<track src="demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English" />
</video>
<figcaption>
<p>Training and Development (<a href="cpts-lg2-en.html">Transcript</a>)</p>
</figcaption>
</figure>video2-captions-en.xml
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
<head>
<styling>
<style id="defaultSpeaker" tts:fontSize="12" tts:fontFamily="Arial" tts:fontWeight="normal" tts:fontStyle="normal" tts:textDecoration="none" tts:color="white" tts:backgroundColor="black" tts:textAlign="center"/>
<style id="defaultCaption" tts:fontSize="12" tts:fontFamily="Arial" tts:fontWeight="normal" tts:fontStyle="normal" tts:textDecoration="none" tts:color="white" tts:backgroundColor="black" tts:textAlign="center"/>
</styling>
</head>
<body style="defaultCaption" id="thebody" xml:id="b1">
<div begin="1.40s" dur="3.33s">Hi, my name is Eric, and I'm a Service Canada employee.</div>
...
</body>
</tt>Muted MPEG4 (H264 + AAC) source with inline HTML captions
This example illustrates the use of an inline transcript to provide captions. This example can also demonstrate the fallback mechanism in Web browsers that don't support HTML5 videos.
Looking for a Job - HTML5 Transcript/Captions
(Animated pen draws a red line that leads into the text Looking for A Job)
(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)
Hi, my name is Eric, and I'm a Service Canada employee.
You may have heard the old saying that, when you're out of work, finding a job is your full-time occupation.
(LINE DRAWING GRAPHIC: Stick person walks to right side of screen. Screenshot of job bank website appears in animated computer screen.)
Well, there's a lot of truth to that:
finding a job does take time… and effort.
(LINE DRAWING GRAPHIC: Stick person rests head against computer screen in discouragement. But then perks-up.)
But don't get discouraged.
There are a number of online tools and programs available to help you find a job.
(Close-up of the Host.)
No matter what you're looking for there are many Web sites where employers post job notices looking for people to fill vacant positions.
(Job Bank website reappears.)
One of these sites is called Job Bank.
It's updated every day, and lists job opportunities that are available across the country.
(Close-up of the screen. Stick person’s profile. Words “Updated Daily and “48 Hours” appear on screen.)
Since the job ads on Job Bank are updated daily, you should check them regularly.
And, you can search for jobs posted in the last 48 hours.
(Words “Advertise your Skills” and “Email your matches” appear on screen.)
On Job Bank you can also advertise your skills, and even ask them to send you e-mails when jobs that match your search criteria are posted.
(Close-up of the Host. LINE DRAWING GRAPHIC: of the Parliament Building. The web address jobs.gc.ca appears in large letters on the front lawn, stick person points to words.)
If you're thinking about working in the public sector, jobs.gc.ca is the official Web site for Government of Canada listings open to the public.
Keep in mind, that some departments, like the Canada Revenue Agency and Parks Canada, post jobs on their own sites too.
(Medium shot of the Host. LINE DRAWING GRAPHIC: stick person points to Job Bank web page, where words “User ID” and “Password” are highlighted.)
When you apply for jobs, potential employers might ask you to send them your résumé and a covering letter.
Of course, you'll want to make a good first impression on any potential employer.
(The text Résumé Builder appears across stick person’s screen.)
Here we can help too!
Check out our online Résumé Builder on the Job Bank Web site.
It can show you how to create a first-class résumé by giving you tips and different layout options.
(Medium shot of the Host. LINE DRAWING GRAPHIC: one stick person talks to another stick person behind a desk labelled Career Counsellor.)
And if you're not sure which jobs you'd like to apply for, check out our Career Navigator tool to explore occupations that you might be interested in.
As well, career counsellors are usually available through your provincial or territorial government to help out.
(Close-up of the Host. LINE DRAWING GRAPHIC: Stick person take a bow. Service Canada logo appears.)
At Service Canada, we're people serving people.
(Dip to black.)
View code
<figure class="wb-mltmd">
<video poster="demo/video1-en.jpg" title="Looking for a Job" muted>
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<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>
</figure>MPEG4 (H264 + AAC) source with cue points
This example illustrates the use of buttons to navigate to specific cue points within the video.
Looking for a Job (Transcript)
View code
<figure class="wb-mltmd">
<video poster="demo/video1-en.jpg" title="Looking for a Job">
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<button class="btn btn-info cuepoint" data-cuepoint="45s" type="button">Cue point - 45s</button>
<button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button">Cue point - 01:10</button>
<figcaption>
<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
</figcaption>
</figure>MPEG4 (H264 + AAC) and WebM (VP8) source with full screen button
Looking for a Job (Transcript)
View code
In-page HTML
<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
<video poster="demo/video1-en.jpg" title="Looking for a Job">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<figcaption>
<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
</figcaption>
</figure>Multimedia player in an overlay
View code
<p><a href="#mltmd-overlay" aria-controls="mltmd-overlay" class="overlay-lnk" role="button">Open the video</a></p>
<section id="mltmd-overlay" class="wb-overlay modal-content overlay-def wb-popup-full">
<header class="modal-header">
<h2 class="modal-title">Multimedia player in an overlay</h2>
</header>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
<video poster="demo/video1-en.jpg" title="Looking for a Job">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
</video>
<figcaption>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</figcaption>
</figure>
</div>
</div>
</div>
</section>- Date modified: