HTML5 : les nouveaux attributs vidéo au crible L'élément vidéo

Comme indiqué au chapitre précédent, il existe en fait trois formats de fichier que les éditeurs doivent prendre en considération lorsqu'il s'agit de cibler tous les navigateurs qui prennent en charge l'élément HTML5 <video> (voir Tableau 2.1).

tableau 2.1 - les codecs vidéo pris en charge par défaut par les principaux
Tableau 2.1 - Les codecs vidéo pris en charge par défaut par les principaux navigateurs. © Pearson

Puisqu'il n'existe pas de codec de base établi (voir l'historique au Chapitre 1), nous proposerons des exemples pour tous ces formats.

Comme il est d'usage en matière de programmation logicielle, nous commencerons par un exemple "Hello World". Voici les trois exemples simples qui incorporent de la vidéo en HTML5 :

 Listing 2.1 : Incorporer de la vidéo Ogg en HTML5

<video src="HelloWorld.ogv"></video>


 Listing 2.2 : Incorporer de la vidéo WebM en HTML5

<video src="HelloWorld.webm"></video>


 Listing 2.3 : Incorporer de la vidéo MPEG-4 en HTML5

<video src="HelloWorld.mp4"></video>


Nous avons placé ces trois portions de code sur une même page web, ajouté des contrôles (la barre de transport en bas ; nous y reviendrons plus loin) et fixé la largeur à 300 pixels afin de proposer une comparaison directe entre les cinq principaux navigateurs. La Figure 2.1 présente le résultat.

Firefox affiche les vidéos Ogg et WebM et produit une erreur pour les vidéos MPEG-4. Opera réagit de façon similaire, sans rien afficher pour les vidéos MPEG-4. Safari et Internet Explorer n'affichent rien pour les vidéos Ogg et WebM et n'affichent que les vidéos MPEG-4. Chrome affiche les trois formats.

figure 2.1 - l'élément dans cinq navigateurs. de gauche à droite : firefox,
Figure 2.1 - L'élément dans cinq navigateurs. De gauche à droite : Firefox, Safari, Chrome, Opera et Internet Explorer. © Pearson
Il est possible que vous remarquiez des implémentations divergentes des éléments vidéo. Par exemple, tous les navigateurs n'affichent pas un cadre vide lorsqu'ils rencontrent un format qu'ils ne peuvent décoder et tous n'affichent pas nécessairement les contrôles de lecture lors d'un survol avec la souris. Nous allons découvrir des différences de ce genre au cours de ce chapitre. Elles tiennent au fait que la spécification conserve une marge d'interprétation. Il est fort probable que le comportement des navigateurs s'uniformisera à mesure que la spécification deviendra plus

claire en matière d'affichage. Nous analyserons plus en détail les fonctionnalités et les différences ci-après. Il ne s'agissait ici que d'un premier aperçu.

Précédent
Suivant