- Passer au contenu principal
- Passer à « À propos de ce site »

# 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

- Exemple vidéo anglais
- Exemple vidéo français
- Exemple audio anglais
- Exemple audio français
- Exemple YouTube anglais
- Exemple YouTube français

## 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="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" />

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="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="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="http://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="http://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="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
    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.

## É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 :
  2018-04-18