Support de cours les médias en HTML5

Support de cours les médias en HTML5, tutoriel & guide de travaux pratiques HTML5 en pdf.

Tour d’horizon

Avec l’introduction de la nouvelle balise <video>, tout ce que nous devons faire est de déclarer le marquage dans la page web, autrement dit d’indiquer la vidéo qui doit être chargée, et le navigateur fera le reste (en supposant qu’il prenne en charge l’élément video) :
<video src= »your_video.ogg » />
L’attribut src contient l’adresse de la ressource média (audio ou vidéo) qui doit s’afficher dans la page. Dans l’exemple de code précédent, nous lui avons demandé de charger la vidéo au format Ogg Theora.
Même si ce code seul suffit à rendre la vidéo utilisable, on a cependant intérêt à spécifier les dimensions du conteneur vidéo avec les attributs width et height :
<video width= »640″ height= »360″ src= »your_video.mp4″ />
Si on ne le fait pas, le navigateur utilisera les dimensions d’origine de la ressource vidéo.
Les autres propriétés prises en charge par la balise video sont les suivantes :
• preload. Indique au navigateur de précharger le contenu vidéo alors que la page se charge. Ainsi, l’utilisateur n’aura pas à attendre que la vidéo se charge lorsqu’il la lira.
• autoplay. Indique au navigateur de jouer la vidéo automatiquement dès qu’elle est dis-ponible. Faites attention avec cet attribut car vous ne pouvez pas être toujours sûr que l’utilisateur voudra voir cette vidéo. Cela est particulièrement vrai s’il est connecté via un périphérique mobile où la bande passante est plus onéreuse.
• loop. Réexécute la vidéo dès qu’elle est achevée.
• controls. Si cette propriété est activée, cela indique au navigateur d’afficher le groupe d’éléments de contrôle intégrés comme lecture, stop, pause et volume.
• poster. Indique un fichier image que le navigateur peut afficher lorsque la donnée vidéo n’est pas disponible.

Mise en œuvre

L’exemple de code qui suit montre comment importer puis afficher une vidéo dans une page web :
<!DOCTYPE html>
<html>
<head>
<title>
Solution 5-1: Intégrer de la vidéo dans une page web
</title>
</head>
<body>
<h1>Comtaste’s Showreel</h1>
<video width= »640″ height= »360″
src= »comtaste_showreel.mp4″ autoplay />
</body>
</html>
Si vous ouvrez cet exemple dans un navigateur, la vidéo sera exécutée immédiatement et occupera un espace de 640 pixels de large et de 800 pixels de haut (voir Figure 5.2).
Si vous souhaitez essayer cette solution pour charger une vidéo distante, utilisez le code suivant : <video width= »640″ height= »360″ src= »http://www.youtube.com/ demo/google_main.mp4″ autoplay />.
Si l’utilisateur ouvre le fichier HTML dans un navigateur qui ne prend pas en charge la balise video, une page blanche s’affiche. Une bonne pratique consiste, par conséquent, à proposer un contenu alternatif dans le cas où cela arrive. Utilisez alors l’attribut poster pour afficher une image qui pourrait être, par exemple, une capture d’image de la vidéo. Elle peut être soit locale, soit provenir d’un autre endroit sur le Web.
Ajoutons cet attribut à la balise video :
<video width= »640″ height= »360″ src= »comtaste_showreel.mp4″ autoplay poster= »../
➥ img/Figure_5_3.png »> Video n’est pas pris en charge par ce navigateur! </video>
Si la vidéo ne se charge pas, le navigateur affichera l’image spécifiée par l’attribut poster (voir Figure 5.3).
Si l’attribut poster n’est pas spécifié et si le navigateur ne peut pas charger la vidéo, c’est la première image de la vidéo qui s’affichera par défaut.

Conseil d’expert

Quelques problèmes apparaissent avec la prise en charge de la vidéo HTML5 des périphé-riques Apple iOS (iPhone, iPod Touch et iPad) :
• Si vous utilisez l’attribut poster, iOS ignorera l’élément video. Apple a annoncé que ce problème était résolu dans iOS 4.0.
• iOS ne prend en charge que le format H.264. Si vous utilisez la balise <source> (voir la solution suivante), il reconnaîtra seulement le premier format vidéo.
• Les périphériques Android ne prennent pas en charge les éléments de contrôle natifs du navigateur et les ignorent. De même, le système d’exploitation est un peu confus en ce qui concerne l’attribut type qui sert à spécifier le conteneur video.
Solution 5.2 – Détecter la prise en charge de la vidéo dans les différents navigateurs
Nous avons déjà évoqué le large choix de formats vidéo disponibles sur le Web. Les premières spécifications du HTML5 ont établi que la prise en charge des éléments video par un naviga-teur devait se baser sur deux formats : Ogg Vorbis (pour l’audio) et Ogg Theora (pour la vidéo). Cette déclaration a provoqué une certaine agitation parmi les grands acteurs impliqués, tels que Apple et Nokia, à tel point que le WSC – Web Standards Curriculum – a retiré toute référence aux formats audio et vidéo des spécifications.
Ce choix a évidemment entraîné un certain chaos. MPEG4 (H.264), Ogg Theora, AVIS et VP8 WebM sont tous prêts à mener une guerre pour devenir le standard du futur. Les navigateurs eux-mêmes ont commencé à prendre parti (voir Figure 5.4).
• Opera : Ogg Theora et WebM dans le futur.
• Chrome : Ogg Theora et WebM (Google a récemment annoncé l’abandon de H.264).
• Firefox : Ogg Theora et WebM dans le futur.
• Safari : H.264.
• Internet Explorer : H.264 et WebM.
On comprend donc facilement pourquoi il est nécessaire, étant donné la situation actuelle, d’opérer des vérifications de navigateurs lorsque la page se charge, afin de choisir les formats vidéo.
Plusieurs techniques permettent de vérifier le format vidéo pris en charge par le navigateur. La solution ci-après s’appuie sur la bibliothèque JavaScript Modernizr, disponible sur http://www. modernizr.com/, dont nous avons déjà parlé au Chapitre 1.
Nous pouvons également nous servir des fonctions natives de cette bibliothèque vidéo pour vérifier la prise en charge de la balise video et des codecs. En voici un exemple :
if (Modernizr.video) {
if (Modernizr.video.webm) {
// prend en charge WebM
}
else if (Modernizr.video.ogg){
// prend en charge Ogg Theora + Vorbis } else if (Modernizr.video.h264){
// prend en charge H.264 vidéo + AAC audio }
}
La bibliothèque exécute cette vérification en testant la propriété canPlayType de l’élément video.
Le navigateur retourne alors l’une de ces trois valeurs :
• Une chaîne vide : il ne prend pas l’élément en charge.
• La chaîne maybe : il n’est pas sûr de prendre l’élément en charge.
• La chaîne probably : il prend en charge la combinaison du conteneur et du codec.

Mise en œuvre

Pour créer une page HTML qui vérifie la prise en charge de la balise video puis charge le bon code, choisissez un mécanisme analogue à celui de la solution précédente, mais présentant certaines différences.
Voici un exemple de code complet qui utilise la bibliothèque Modernizr afin de détecter la prise en charge de la vidéo sur les différents navigateurs :
<html>
<head>
<title>
Solution 5-2: Détecter la prise en charge de la vidéo dans les différents navigateurs </title>
<script type= »text/JavaScript » src= »js/modernizr-1.0.min.js »></script> <style type= »text/css »>
body { background: #f7f7f7; color: black; text-align: center; }
.video #no-video,
.no-video #video { display: none; }
</style>
</head>
<body>
<h1>Comtaste’s Showreel</h1>
<div id= »video »>
<h1> Ceci est un élément vidéo HTML5 </h1>
<video width= »640″ height= »360″
src= »comtaste_showreel.mp4″ autoplay poster= »../img/Figure_5_3.png » /> </div>
</body>
</html>
Au moment de l’écriture de cet ouvrage, la dernière version de la bibliothèque Modernizr est la 1.7, mais cette solution fonctionne également avec des versions plus anciennes.
Dans ce code, nous avons créé deux DIV : une, qui contient le code pour les navigateurs qui prennent en charge la balise <video> (et dont l’id est #video), et une autre pour les autres navi-gateurs (dont l’id est #no-video). Nous avons également inséré un bloc de style contenant les déclarations CSS nécessaires pour cacher la DIV qui n’est pas utilisée, grâce à la commande display:none.
Dans la première DIV (celle dont l’id est #video), nous avons inséré la balise <video>. La seconde, elle, utilise une technique écrite par Kroc Camen, qui ne nécessite pas de JavaScript mais deux vidéos encodées – un fichier ogg et un fichier MP4 – et qui se fonde sur la supposi-tion que, si la vidéo HTML5 n’est pas prise en charge, alors Adobe Flash sera utilisé à la place.