Lecteur multimédia - Vidéo
Vue d'ensemble
Pour la vidéo, le lecteur multimédia s'appuie sur la balise « video » HTML5 natif. Le format MPEG-4 (codec H264) est le minimum requis pour la vidéo parce que c'est le format vidéo standard sur de nombreux navigateurs. Un WebM facultative mais fortement recommandée (codec VP8) devrait être ajouté aussi bien pour permettre à certains navigateurs tels que Firefox qui ne comprennent pas un support natif pour H264 de tirer parti des gains de performance de leur implémentations d'HTML5.
Le scénario du lecteur multimédia repose sur l'élément « progress » HTML5 et utilise un polyfill lorsque l'élément n'est pas pris en charge.
Exemples
Tous les exemples vidéo utilisent la vidéo HTML5 natif sur la plupart des navigateurs modernes, y compris Firefox 6 +, Google Chrome 3 + et Edge.
MPEG4 (H264 + AAC) et WebM (VP8) avec les sous-titres en HTML
Trouver un emploi (Transcription)
Visualiser le code
HTML dans la page
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-fr.html"}'>
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Trouver un emploi (<a href="cpts-lg-fr.html">Transcription</a>)</p>
</figcaption>
</figure>cpts-lg-fr.html
<div id="inline-captions">
<section>
<h2>Transcription</h2>
<p class="wb-vd"><strong>(La vidéo débute par une image de l'animatrice s'avançant vers la caméra. Un trait rouge suit le texte « Trouver un emploi ».)</strong></p>
<p><span class="wb-tmtxt" data-begin="2.34s" data-dur="3.04s">Bonjour, je m'appelle Amélie et je travaille </span>
<span class="wb-tmtxt" data-begin="5.37s" data-dur="1.50s">à Service Canada.</span></p>
...
</section>
</div>MPEG4 (H264 + AAC) et WebM (VP8) avec les sous-titres TTML
Développement des compétences (Transcription)
Visualiser le code
HTML dans la page
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-fr.html"}'>
<video poster="demo/video2-fr.jpg" title="Video Example">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-fr.mp4" />
<track src="demo/video2-captions-fr.xml" kind="captions" data-type="application/ttml+xml" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Développement des compétences (<a href="cpts-lg2-fr.html">Transcription</a>)</p>
</figcaption>
</figure>video2-captions-fr.xml
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="fr" 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="2.20s" dur="3.10s">Bonjour, je m'appelle Amélie et je travaille</div>
<div begin="5.30s" dur="1.63s">à Service Canada.</div>
...
</body>
</tt>MPEG4 (H264 + AAC) Source en sourdine avec sous-titre intégré au HTML
Cet exemple illustre l'utilisation d'un relevé de notes en ligne pour fournir des légendes. Cet exemple peut également démontrer le mécanisme de secours dans les navigateurs Web qui ne supporte pas les vidéos HTML5.
Trouver un emploi - Transcription et Sous-Titres HTML5
(La vidéo débute par une image de l'animatrice s'avançant vers la caméra. Un trait rouge suit le texte « Trouver un emploi ».)
Bonjour, je m'appelle Amélie et je travaille à Service Canada.
(Coupure et plan moyen de l'animatrice. DESSIN AU TRAIT : Le bonhomme-allumettes apparaît à l'écran.)
Vous savez que trouver un emploi est un travail à temps plein qui exige beaucoup d'efforts
(DESSIN AU TRAIT : Le bonhomme-allumettes penche la tête en signe de découragement, mais la relève ensuite avec énergie en regardant l'écran d'ordinateur qui apparaît à l'écran.)
mais il ne faut pas vous laisser décourager par l'ampleur de la tâche.
Nous avons mis à votre disposition de nombreux outils et programmes en ligne pour vous aider à trouver un emploi.
(Gros plan de l'animatrice. Une page du site Guichet emplois apparaît à l'écran. Les mots « Guichet emplois » apparaissent à l'intérieur d'une bulle.)
Peu importe l'emploi que vous cherchez, vous trouverez sur Internet de nombreux sites Web où les employeurs affichent leurs postes vacants.
(DESSIN AU TRAIT : Le bonhomme-allumettes se place de profil. Les mots « mis à jour quotidiennement » et « 48 heures » apparaissent à l'intérieur d'une bulle sous « Guichet emplois ».)
L'un de ces sites, Guichet emplois, est mis à jour quotidiennement.
Vous y trouverez des occasions d'emploi partout au pays.
Et puisque le site est mis à jour quotidiennement, n'oubliez pas d'y jeter un coup d'oeil régulièrement.
Vous y trouverez les postes affichés au cours des dernières 48 heures.
(Les mots « faites valoir vos compétences » et « liste des emplois correspondant à vos critères de recherche par courriel » apparaissent à l'intérieur d'une bulle sous « Guichet emplois ».)
Guichet emplois vous permet également de faire valoir vos compétences, et de vous inscrire pour recevoir par courriel une liste des emplois qui correspondent à vos critères de recherche.
(Gros plan de l'animatrice. Une photo de l'édifice du Parlement apparaît en arrière-plan. DESSIN AU TRAIT : L'adresse « emplois.gc.ca » apparaît sur une pancarte plantée dans la pelouse devant le Parlement, et le bonhomme-allumettes pointe vers la pancarte.)
Si vous voulez travailler a gouvernement du Canada, consultez le site emplois.gc.ca, qui répertorie les postes ouverts au public dans l'ensemble de la fonction publique fédérale.
Notez que certains ministères, comme l'Agence du revenu du Canada et Parcs Canada, affichent aussi les postes vacants sur leur propre site.
(Plan moyen de l'animatrice. DESSIN AU TRAIT : Le bonhomme-allumettes pointe vers une page du site Guichet emplois où les mots « Nom d'utilisateur » et « Mot de passe » sont mis en évidence.)
Vous aurez fort probablement à préparer un curriculum vitae et une lettre de présentation lorsque vous ferez une demande d'emploi, et bien entendu, vous voudrez faire bonne impression.
(Les mots « Concepteur de CV » apparaissent à l'intérieur d'une bulle.)
Nous pouvons vous aider!
Grâce à l'outil Concepteur de CV, que vous trouverez sur le site Guichet emplois, vous pourrez obtenir des conseils, choisir un modèle et créer un curriculum vitae d'allure professionnelle.
(Gros plan de l'animatrice. Une page du site Guichet emplois apparaît à l'écran. Les mots « Navigation carrière » apparaissent à l'intérieur d'une bulle.)
Si vous ne savez pas quel type d'emploi vous intéresse, consultez l'outil Navigation carrière, qui pourra vous aider à choisir une carrière qui vous convient.
(DESSIN AU TRAIT : Le bonhomme-allumettes parle à un autre bonhomme-allumettes assis derrière un bureau surmonté d'un panneau où figurent les mots « orientation professionnelle ».)
Aussi, le gouvernement de votre province ou territoire offre sans doute un service d'orientation professionnelle qui pourrait vous aider dans vos démarches.
(Gros plan de l'animatrice. DESSIN AU TRAIT : Le logo de Service Canada apparaît et le bonhomme-allumettes fait un salut.)
À Service Canada, nous sommes au service des gens.
(L'écran devient noir.)
Visualiser le code
<figure class="wb-mltmd">
<video poster="demo/video1-fr.jpg" title="Trouver un emploi" muted>
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
<track src="#inline-captions" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<figcaption>
<details id="inline-captions">
<summary>Trouver un emploi - Transcription et Sous-Titres HTML5</summary>
<p class="wet-boew-vd"><strong>(La vidéo débute par une image de l'animatrice s'avançant vers la caméra. Un trait rouge suit le texte « Trouver un emploi ».)</strong></p>
<p><span class="wb-tmtxt" data-begin="2.34s" data-dur="3.04s">Bonjour, je m'appelle Amélie et je travaille </span>
<span class="wb-tmtxt" data-begin="5.37s" data-dur="1.50s">à Service Canada.</span></p>
...
</details>
</figcaption>
</figure>MPEG4 (H264 + AAC) Source avec marqueurs temporels (cue points)
Cet exemple illustre l'utilisation de boutons pour naviguer à des marqueurs temporels dans une vidéo.
Trouver un emploi (Transcription)
Visualiser le code
<figure class="wb-mltmd">
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="Français" />
</video>
<button class="btn btn-info cuepoint" data-cuepoint="45s" type="button">Marqueur temporel - 45s</button>
<button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button">Marqueur temporel - 01:10</button>
<figcaption>
<p>Trouver un emploi (<a href="cpts-lg-fr.html">Transcription</a>)</p>
</figcaption>
</figure>MPEG4 (H264 + AAC) et WebM (VP8) avec bouton plein écran
Trouver un emploi (Transcription)
Visualiser le code
HTML dans la page
<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Trouver un emploi (<a href="cpts-lg-fr.html">Transcription</a>)</p>
</figcaption>
</figure>Lecteur multimédia dans une fenêtre superposé
View code
<p><a href="#mltmd-overlay" aria-controls="mltmd-overlay" class="overlay-lnk" role="button">Ouvrir le vidéo</a></p>
<section id="mltmd-overlay" class="wb-overlay modal-content overlay-def wb-popup-full">
<header class="modal-header">
<h2 class="modal-title">Lecteur multimédia dans une fenêtre superposé</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-fr.html"}'>
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.webm" />
<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-fr.mp4" />
<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
</video>
<figcaption>
<p>Trouver un emploi (<a href="cpts-lg-fr.html">Transcription</a>)</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>- Date de modification :