HTML5 : Audio et Vidéo

Flash vs HTML5

Flash est apparu et s’est installé dans nos navigateurs pour combler principalement trois grandes fonctionnalités qui ont manqué au langage HTML :

1. Pouvoir écouter de la musique
2. Pouvoir regarder des vidéos
3. Pouvoir animer nos pages

© http://cdn.reelseo.com

Cependant la nouvelle spécification HTML5 vient marcher sur les plate-bandes de Flash en sortant trois nouvelles balises qui répondent aux trois problématiques citées ci-dessus :

1. La balise <audio> pour la lecture des fichiers audios
2. La balise <video> pour la lecture des vidéos
3. La balise <canvas> pour dessiner et réaliser des animations en JavaScript

Utilisation simple

Plus c’est simple à mettre en place et plus c’est utilisé par les développeurs, l’ajout d’un média vidéo ou audio dans une page devient à présent aussi simple que l’ajout d’une image :

<video src="..." /> ressemble fortement à <img src="..." />

Ces nouveaux éléments de type HTMLMediaElement, disposent d’attributs convainquant :

• controls pour activer l’affichage de l’interface de contrôle du navigateur
• autobuffer pour activer le chargement automatique de la ressource en cache
• autoplay pour activer le lancement automatique de la lecture
• loop pour lire le ou les médias en boucle
• src pour fournir l’url du fichier média à lire

La balise source placée à l’intérieure d’une balise audio ou video permet aussi de définir l’url (@src), le type mime et le codec (@type) d’une ressource média.
Pour assurer la lecture de vos fichiers dans le cas où votre navigateur n’aurait pas le codec adéquate, l’ajout de plusieurs sources représente une alternative intéressante.

Ajout de vidéo en HTML5 :

<video controls autoplay>
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'>
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"' />
</video>

Ajout de vidéo en JavaScript :

    var video = document.createElement('video');
    video.src = 'video.ogv';
    video.controls = true;
    document.body.appendChild(video);

De plus l’interface HTMLMediaElement fournit une multitude de propriétés intéressantes allant du volume à l’état du buffer en passant par le temps de lecture courant. Sans oublier la batterie d’évènements qui l’accompagne, permettant de suivre l’avancement du chargement, l’état du lecteur et les actions lancées par l’utilisateur (play(), pause(), stop() par exemple).

Astuce : la méthode canPlayType(type) permet de demander au navigateur s’il supporte le format vidéo ou audio fournit en paramètre.

Problème des codecs

Le gros problème d’aujourd’hui réside au fait que les principaux acteurs de la rédaction de la spécification HTML5, n’ont pas réussi à se mettre d’accord sur les codecs à utiliser alors que l’Ogg Vorbis et l’Ogg Theora avaient été pressentis au départ étant donné que c’est un format libre.

© http://t2.gstatic.com

Le W3C se contente de citer un certain nombre de formats allant du H.264 au DIRAC pour la vidéo en passant par mpeg-4 et Theora; même chose pour l’audio avec AAC, FLAC, Vorbis, … La spécification HTML5 laisse donc le choix au navigateurs de supporter tel ou tel format/codecs, ce qui n’est pas bon signe.

Si aujourd’hui YouTube et Vimeo ont choisi le H.264, DailyMotion reste fidèle aux idées de départ avec sa démo basée sur Ogg (Theora + Vorbis) et ne supportant que Firefox.

Rappelons tout de même que pour la vidéo, le codec H.264 est soumis aux royalties alors que Theora (Ogg)  est libre.

Intégration sur le Web

- Youtube s’est lancé en début d’année dans une version beta de son service en HTML 5 en activant l’option sur cette page mais semble être déçu aujourd’hui pour les raisons données dans cet article. Youtube est compatible avec le codec vidéo H.264 ou le codec VP8 (WebM).

- Dailymotion pour sa part propose une version HTML5 qui est compatible tant avec le codec vidéo H.264 que Theora (Ogg).

- Vimeo permet lui aussi de lire les vidéos sans plugin Flash en cliquant sur le lien « Switch to HTML5 player » en bas d’une vidéo. Viméo a choisi d’être compatible uniquement avec le codec vidéo H.264.

© http://lafoireolien.com

- Deezer et Jiwa, dont l’écoute se fait principalement en Flash, devraient eux aussi tester les nouvelles balises audio et video dans quelques temps ce qui réduirait le temps de chargement de leur site.

- En ce qui concerne les navigateurs, un tableau sera plus simple pour vous exposer les codecs audio et vidéo que ceux-ci supportent déjà ou supporteront bientôt :

Lecteurs vidéo/audio HTML5

La lecture d’une vidéo ou d’un fichier audio en HTML5 peut se faire uniquement en utilisant les navigateurs de dernière génération, donc il faut prévoir une alternative Flash pour les navigateurs moins récent pour que vos fichiers restent lisible partout. La balise peut elle même inclure un lecteur Flash de remplacement : sur les anciens navigateurs, elle est ignorée, seul le lecteur Flash est pris en compte :

<video controls>
   <source src="mavidéo.ogg" type="video/ogg"/>
   <source src="mavidéo.mp4" type="video/mp4"/>
   <object src="mavidéo.swf"
      type="application/x-shockwave-flash"
      width="800" height="500"
      allowscriptaccess="always"
      allowfullscreen="true"/>
</video>

Voici quelques liens vers des lecteurs vidéo/audio HTML5 qui valent le détour et qui utilisent toutes les fonctionnalités disponibles jusqu’à présent pour remplacer Flash, sans se soucier de l’incompatibilité entre navigateurs :

html5demo : Selon votre navigateur Web, avec ce script vos vidéos et fichiers audio utiliseront soit un lecteur HTML5, soit un Flowplayer en flash en alternative.

SublimeVideo : Le nom en dit long et on est pas déçu, une simple bibliothèque JavaScript et le miracle est là ^^

jPlayer : Basé sur jQuery, ce lecteur audio supporte le codec mp3 et ogg, il est personnalisé en CSS et offre de nombreuses fonctionnalités intéressante.

Cet article a été écrit par :

Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• « Kitsch » ou « cute » : 3 vidéos japonaises
• La nouvelle pub du processeur Intel Core i5 est un film d’action pour Geeks
• Vidéo de Feedmee surprenant nos instants fugaces de sérénité
• Tétris remis au goût du jour grâce à HTML5
• TubeMaster : un freeware pour télécharger vos streamings