Lecteur Multimédia - nschonni/wet-boew GitHub Wiki

english

Cette fonctionnalité offre un lecteur multimédia qui permet d’intégrer dans des pages Web des fichiers vidéo et audio accessibles.

Table of Contents Aperçu Objet Justification Mise en œuvre Formats de fichiers multimédias Formats compatibles Éléments requis Exemple de code Vidéo Audio Développement Problèmes connus À venir Historique des versions Pages connexes

Aperçu

Responsable de projet : Laurent Goderre (@LaurentGoderre)

Ce lecteur multimédia permet aux concepteurs d’intégrer facilement des fichiers audio ou vidéo dans leurs pages Web, en plus de les aider à assurer la conformité aux WCAG 2.0. Il améliore les balises HTML5 video et audio et fournit un script polyfill qui permet d’utiliser le lecteur Flash pour les navigateurs qui ne prennent pas en charge les balises susmentionnées.

Objet

Le but de cette fonctionnalité est d’aider les utilisateurs à s’assurer que les fichiers vidéo et audio intégrés dans leurs sites Web respectent les exigences des WCAG 2.0.

Justification

Il n’existe actuellement aucun module d’extension pour lecteur multimédia qui permet l’accessibilité complète à partir d’un clavier : en effet, il faut une souris pour accéder à une partie, voir à la plupart des fonctions des lecteurs vidéo. Le lecteur multimédia BOEW (Boîte à outils de l’expérience Web) permet à l’utilisateur de sélectionner toutes ses fonctions à l’aide de la touche de tabulation et de les activer en appuyant sur Entrée.

Mise en œuvre

Ce lecteur multimédia est simple à mettre en œuvre et à utiliser; il ne nécessite l’utilisation que de quelques balises HTML5 et du lien vers la source multimédia à intégrer.

Formats de fichiers multimédias

Ce lecteur multimédia prend en charge plusieurs formats de fichiers, indiqués ci-dessous. Toutefois, nous vous recommandons de fournir les fichiers vidéo au moins dans le format MPEG4 (à l’aide des codecs H264 et AAC), afin que n’importe qui puisse les écouter : tous les lecteurs pour appareil mobile ainsi que la plupart des navigateurs Web sont en mesure de lire ce type de fichier. Nous vous recommandons également d’accompagner les fichiers MPEG4 d’une version en format WebM (à l’aide du codec VP8), afin de tirer profit de la prise en charge native des navigateurs, comme FireFox.

Formats compatibles

Vidéo : MPEG4 (H264+AAC), WebM(VP8)
Audio : MP3, Ogg Vorbis
Sous-titres : TTML, HTML5 Data

Éléments requis

Il faut placer chaque fichier multimédia dans son propre élément <div> en utilisant la classe « wet-boew-multimedia » :
```
<div class="wet-boew-multimedia">
```
Chaque conteneur doit contenir une balise <video> ou <audio>.
La balise <video> ou <audio> doit contenir au moins une balise <source> comprenant un lien vers la source multimédia :
```
<source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.mp4" type="video/mp4">
```
Remarque : Vous pouvez indiquer plus d’une source pour le vidéo : le lecteur lit simplement la première qui fonctionne (c.-à-d. qui est accessible, compatible, etc.)
Finalement, vous devez inclure la balise <track> lorsque vous utilisez celle <video>, car elle fournit les sous-titres associés à la vidéo :
```
<track kind="captions" data-type="text/html" src="mediaplayer-transcript_captions-eng.html"></track>
```
Remarque : Lorsque vous utilisez la balise <audio>, vous devez inclure sur la page un lien vers une transcription du fichier audio en question.
Ce lecteur multimédia prend en charge deux formats de sous-titres qui dépendent de la propriété data-type. Il s’agit des formats suivants : application/ttml+xml(en anglais seulement), spécifié par le W3C et text/html, conçu pour la BOEW.

Remarque : Afin de profiter de la conception adaptative, assurez-vous que le fichier vidéo se trouve dans un conteneur qui tire parti de la fonctionnalité de grilles.

Exemple de code

Les exemples fonctionnels se trouvent ici.

Vidéo

[Lien] vers l’exemple de vidéo bientôt disponible.

<div class="wet-boew-multimedia span-4">
	<video width="480" height="270" poster="http://31591.vws.magma.ca/sct-tbs/wet-boew/thumbnail.png" title="Exemple de vidéo">
		<source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.webm" type="video/webm">
		<source src="http://31591.vws.magma.ca/sct-tbs/wet-boew/demo-eng.mp4" type="video/mp4">
�		<track kind="captions" data-type="text/html" src="mediaplayer-transcript_captions-eng.html"></track>
	</video>
</div>

Audio

[Lien] vers l’exemple de fichier audio bientôt disponible.

<div class="wet-boew-multimedia span-4">
	<audio title="Exemple de fichier audio">
		<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries.ogg" type="audio/ogg">
		<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3">
	</audio>
</div>

Développement

Direction générale : feature-multimedia-player

Le lecteur multimédia dépend du script polyfill de barre de progression.

Le code pour ce lecteur multimédia se trouve à plusieurs endroits dans le répertoire source de la BOEW :

js/workers/multimedia.js : contient le code JavaScript du lecteur multimédia;
js/sass/includes/_multimedia.scss : contient le fichier css du lecteur multimédia;
js/sass/includes/_multimedia-ie7.scss : contient le fichier css particulier à IE7 du lecteur multimédia;
js/bin/multimedia.swf : contient le lecteur Flash de secours utilisé lorsque le navigateur Web n’offre pas la prise en charge native du format de vidéo employé.
Remarque : Le code pour ce lecteur Flash de secours est accessible à partir du référentiel suivant : wet-boew-multimedia-fallback.

Problèmes connus

Il n’existe actuellement aucun problème connu.

À venir

Les options et fonctionnalités demandées seront ajoutées dans des mises à jour à venir :

le contrôle du volume;
l’affichage plein écran;
l’indicateur de chargement.

Historique des versions

Pages connexes

Format des sous-titres pour le lecteur multimédia
À venir : script polyfill de barre de progression