Lecteur multimédia
But
Fournir un lecteur multimédia accessible permettant d'intégrer des contenus vidéo et audio sur les pages Web.
Exemples
Comment implémenter
Le lecteur multimédia requiert l'utilisation de quelques balises HTML5 et un lien vers la source média que vous désirez intégrer.
Formats des médias
Le lecteur multimédia supporte plusieurs formats, énumérés ci-dessous. Toutefois, nous recommandons que vous fournissiez au minimum tout média vidéo au format MPEG4 (en utilisant les codecs H264 et AAC) afin de pouvoir rejoindre le plus grand auditoire, puisque tous les lecteurs mobiles et la plupart des navigateurs sont en mesure de jouer ce format. Nous recommandons également que vous fournissiez les médias en format WebM (en utilisant le codec VP8) en plus du format MPEG4 afin de prendre avantage du support natif du navigateur, par exemple Firefox.
Formats compatibles
- Vidéo : MPEG4 (H264+AAC), WebM (VP8)
- Audio : MP3, Ogg Vorbis
- Sous-titrage : TTML, HTML5 Data
Éléments requis
- Chaque lecteur multimédia doit être placé dans sa propre balise
<figure>en utilisant la classewb-mltmd:<figure class="wb-mltmd"> - Chaque contenant devrait contenir une balise
<video>ou<audio>. -
Facultatif : Ajoutez un lien "Partagez cette vidéo" ou "Partagez ce fichier audio" en ajoutant ce qui suit à la balise
figure:data-wb-mltmd='{"shareUrl": "url"}' -
Ajoutez l'élément
figcaptionà l'élémentfigureavec le titre du fichier vidéo ou audio. Si une transcription est requise, ajoutez soit le lien vers la transcription, soit un "details/summary" contenant le texte de la transcription.<figcaption> <p>Trouver un emploi</p> </figcaption><figcaption> <p>Trouver un emploi (<a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a>)</p> </figcaption><figcaption> <details id="inline-captions"> <summary>Trouver un emploi - Transcription/Sous-titrage 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 class="wet-boew-vd"><strong>(Coupure et plan moyen de l'animatrice. DESSIN AU TRAIT : Le bonhomme-allumettes apparaît à l'écran.)</strong></p> <p><span class="wb-tmtxt" data-begin="2.50s" data-dur="3.84s">Bonjour, je m'appelle Amélie et je travaille à Service Canada.</span></p> ... </details> </figcaption>
Vidéo
- Ajoutez l'attribut
posterà l'élémentvideoavec la valeur étant l'URL de la vignette de l'image illustrant la vidéo. - Ajoutez l'attribut
titleà l'élémentvideoavec la valeur étant le titre de la vidéo. -
Ajoutez un ou plusieurs éléments
sourceà l'élémentvideoavec l'attributsrcayant comme valeur l'URL du fichier média et l'attributtypeétant son type MIME.
Note : Si vous indiquez plusieurs sources média pour la vidéo, le lecteur jouera le premier média qui fonctionne (est disponible, compatible, etc.).<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" /> <source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4" /> - Ajoutez l'élément
trackaveckind="captions"à l'élémentvideopour inclure le sous-titrage.-
Ajoutez les attributs
srclangetlabelà l'élémenttrackpour identifier la langue du sous-titrage.<track srclang="fr" label="Français" /> - Ajoutez les attributs
srcetdata-typeà l'élémenttrackpour identifier la source du sous-titrage.- Timed Text Markup Language :
data-type="application/ttml+xml"etsrcest l'URL du fichier de sous-titrage de format Timed Text Markup Language. - Fichier de sous-titrage HTML :
data-type="text/html"etsrcest l'URL du fichier de sous-titrage HTML. - Sous-titrage HTML en ligne :
data-type="text/html"andsrcest l'URL du sous-titrage HTML en ligne (e.g.,src="#inline-captions").
- Timed Text Markup Language :
<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" /> -
Ajoutez les attributs
- Facultatif : Ajoutez des boutons pour accéder aux marqueurs temporels dans la vidéo.
- Ajoutez un élément
buttondans le contenantfigure. - Spécifiez le marqueur en secondes (ex. 75s) ou en temps (01:15)
<button class="btn btn-info cuepoint" data-cuepoint="75s">Marqueur temporel - 75s</button><button class="btn btn-info cuepoint" data-cuepoint="01:15">Marqueur temporel - 01:15</button> - Ajoutez un élément
Code
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://youtu.be/p2-1ZIHu1W0"}'>
<video poster="http://www.servicecanada.gc.ca/fra/video/images/te-lj-fra.jpg" title="Trouver un emploi">
<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
<source type="video/mp4" src="http://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>
<button class="btn btn-info cuepoint" data-cuepoint="75s">Marqueur temporel - 75s</button>
<figcaption>
<p>Trouver un emploi (<a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a>)</p>
</figcaption>
</figure>
Vidéo (YouTube)
- Ajoutez l'attribut
titleà l'élémentvideoavec la valeur étant le titre de la vidéo. - Ajoutez un élément
sourceà l'élémentvideoavec l'attributtype="video/youtube"et l'attributsrcétant l'URL de la vidéo.<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" /> - Si le sous-titrage n'est pas déjà inclut pour la vidéo, l'ajouter avec les outils fournis par 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
- Ajoutez l'attribut
titleà l'élémentaudioavec la valeur étant le titre de l'audio. -
Ajoutez un ou plusieurs éléments
sourceà l'élémentaudioavec l'attributsrcavec la valeur étant l'URL du fichier média et l'attributtypeétant le type MIME du fichier.
Note : Si vous indiquez plusieurs sources média pour l'audio, le lecteur jouera le premier fichier média qui fonctionne (est disponible, 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>
Options de configuration
| Option | Description | Comment configurer | Valeurs |
|---|---|---|---|
shareUrl |
Ajoute un lien "Partagez cette vidéo" ou "Partagez ce fichier audio" | Ajoutez à l'élément avec l'attribut class="wb-mltmd". |
|
Événements
| Événement | Déclencheur | Ce qu'il fait |
|---|---|---|
wb-init.wb-mltmd |
Déclenché manuellement (e.g., $( ".wb-mltmd" ).trigger( "wb-init.wb-mltmd" );). |
Utilisé pour initialiser manuellement le lecteur multimédia. Note : Le lecteur sera initialisé automatiquement à moins que le code du lecteur soit ajouté après que la page ait déjà été chargée. |
wb-ready.wb-mltmd (v4.0.5+) |
Déclenché automatiquement après que le lecteur soit initialisé. | Utilisé pour identifier quel lecteur est initialisé (cible de l'événement)
|
wb-ready.wb (v4.0.5+) |
Déclenché automatiquement quant BOEW a fini son chargement et son exécution. | Utilisé pour identifier quand tous les plugiciels BOEW et les polyfills ont terminé leur chargement et leur exécution.
|
Code source
- Date de modification :