Lecteur multimédia

Questions ou commentaires?

But

Fournir un lecteur multimédia accessible permettant d'intégrer des contenus vidéo et audio sur les pages Web.

Exemples

Évaluation et rapport

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

  1. Chaque lecteur multimédia doit être placé dans sa propre balise <figure> en utilisant la classe wb-mltmd : 
    <figure class="wb-mltmd">
  2. Chaque contenant devrait contenir une balise <video> ou <audio>.
  3. 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"}'
  4. Ajoutez l'élément figcaption à l'élément figure avec 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="cpts-lg-fr.html">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

  1. Ajoutez l'attribut poster à l'élément video avec la valeur étant l'URL de la vignette de l'image illustrant la vidéo.
  2. Ajoutez l'attribut title à l'élément video avec la valeur étant le titre de la vidéo.
  3. Ajoutez un ou plusieurs éléments source à l'élément video avec l'attribut src ayant comme valeur l'URL du fichier média et l'attribut type é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="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" />
  4. Ajoutez l'élément track avec kind="captions" à l'élément video pour inclure le sous-titrage.
    1. Ajoutez les attributs srclang et label à l'élément track pour identifier la langue du sous-titrage. 
      <track srclang="fr" label="Français" />
    2. Ajoutez les attributs src et data-type à l'élément track pour identifier la source du sous-titrage.
      • Timed Text Markup Language : data-type="application/ttml+xml" et src est l'URL du fichier de sous-titrage de format Timed Text Markup Language.
      • Fichier de sous-titrage HTML : data-type="text/html" et src est l'URL du fichier de sous-titrage HTML.
      • Sous-titrage HTML en ligne : data-type="text/html" and src est l'URL du sous-titrage HTML en ligne (e.g., src="#inline-captions").
    <track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
  5. Facultatif : Ajoutez des boutons pour accéder aux marqueurs temporels dans la vidéo.
    • Ajoutez un élément button dans le contenant figure.
    • 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>
Code
<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>
	<button class="btn btn-info cuepoint" data-cuepoint="75s">Marqueur temporel - 75s</button>
	<figcaption>
		<p>Trouver un emploi (<a href="cpts-lg-fr.html">Transcription</a>)</p>
	</figcaption>
</figure>

Vidéo (YouTube)

  1. Ajoutez l'attribut title à l'élément video avec la valeur étant le titre de la vidéo.

  2. Ajoutez un élément source à l'élément video avec l'attribut type="video/youtube" et l'attribut src étant l'URL de la vidéo.

    <source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" />

    Ou

    <source type="video/youtube" src="https://youtu.be/9znKJqnFuuY" />
  3. 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="https://www.youtube.com/watch?v=9znKJqnFuuY" />
	</video>
	<figcaption>
		<p>Suspect</p>
	</figcaption>
</figure>

Audio

  1. Ajoutez l'attribut title à l'élément audio avec la valeur étant le titre de l'audio.
  2. Ajoutez un ou plusieurs éléments source à l'élément audio avec l'attribut src avec la valeur étant l'URL du fichier média et l'attribut type é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="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
<source src="https://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="https://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
		<source src="https://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
data-wb-mltmd='{"shareUrl": "url"}'
à l'élément avec l'attribut class="wb-mltmd".
URL
URL de la vidéo ou du fichier audio à partager.
fullscreenBtn

Ajoute un bouton pour afficher la vidéo en plein écran.

Remarque : le bouton n'est pas ajouté par défaut car les contrôles ne sont pas visibles en plein écran.

 Ajoutez
data-wb-mltmd='{"fullscreenBtn": true}'
à l'élément avec l'attribut class="wb-mltmd".
false (par défaut)
La vidéo n'affiche pas de bouton pour le plein écran
true
La vidéo affiche un bouton pour le plein écran

É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) 
$( document ).on( "wb-ready.wb-mltmd", ".wb-mltmd", function( event ) {
});
$( ".wb-mltmd" ).on( "wb-ready.wb-mltmd", function( event ) {
});
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. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Code source

Code source du lecteur multimédia sur GitHub

Date de modification :