Lecteur multimédia

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

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

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 classe wb-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é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="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ément video avec la valeur étant l'URL de la vignette de l'image illustrant la vidéo.
Ajoutez l'attribut title à l'élément video avec la valeur étant le titre de la vidéo.
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" />
```
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" />
```
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": "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ément video avec la valeur étant le titre de la vidéo.
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" />
```
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ément audio avec la valeur étant le titre de l'audio.
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.

É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 ) { });`

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 :: 2014-08-04

Sélection de la langue

Recherche et menus

Recherche

Lecteur multimédia

Vous cherchez la BOEW v3.1?

But

Exemples

Comment implémenter

Formats des médias

Formats compatibles

Éléments requis

Vidéo

Code

Vidéo (YouTube)

Code

Audio

Code

Options de configuration

Événements

Code source