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 IE9.
MPEG4 (H264 + AAC) et WebM (VP8) avec les sous-titres en HTML
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://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
<source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.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
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://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.webm" />
<source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/dc-td-fra.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 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.
Visualiser le code
<figure class="wb-mltmd">
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.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.
Visualiser le code
<figure class="wb-mltmd">
<video poster="demo/video1-fr.jpg" title="Trouver un emploi">
<source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.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>
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://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
<source type="video/mp4" src="https://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.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 :