Lecteur vidéo HTML 5

Une des nouveauté de la norme HTML5 est l’apparition des balises <video> et <audio>. Même si le net regorge de tutoriels et de lecteurs précodés, un petit topo est fait ici.

Html5 et la prise en compte des usages

HTML5 est une norme qui tente de réconcilier la rigueur (comment les choses devraient être conceptualisées et architecturées dans le code) avec les usages (comment ça se passe concrètement). La balise video en est un parfait exemple : la vidéo a toujours été un problème pour les navigateurs, et l’accalmie de la fin des années 2000 n’a été due qu’à la présence du plugin Flash, une solution propriétaire. C’est humiliant.

Codecs

Un codec est un dispositif de compression/décompression, c’est à dire une suite d’opération permettant, à partir d’un fichier numérique, d’en faire une version compressée, c’est à dire plus légère, c’est à dire stockée sur moins d’espace mémoire. le MPG2 par exemple, est employé pour faire circuler les images vidéos par satellite.
A partir de ce fichier compressé, le codec permet, à travers d’algorithmes de décompression, de retrouver la version originale du fichier.
Il existe des codecs sans perte (un fichier zippé puis dézippé sera identique à l’original) ou avec perte (une image compressé en jpeg ou en mp3 on perdu dans l’opération une partie de la qualité du fichier original). On dit dans le deuxième cas que la compression est destructive.

Un rappel sur la différence entre conteneur et codec

Il faut bien rappeler que les formats AVI, MKV, MOV et MP4 ne sont pas des "formats video" mais des conteneurs. A l’intérieur, on va trouver différentes codecs et même d’autres choses. Dans un MKV par exemple on trouvera plusieurs fichiers audio et des fichiers de sous-titres.
On regardera donc quels sont les codecs employés pour compresser les flux vidéo et audio. Voici les codecs plus relevants actuellement :
- H.264 est un format sous licence, on le trouve dans le format mp4, mv4 ou Flv.
- Theora est un format libre, que l’on retrouve dans le format ogg.
- VP8, acheté par google puis versé dans le domaine public. On le trouve dans le format webm.

En son, on trouvera le MP3, le AAC et Vorbis.

l’industrie se met rarement d’accord sur un standard, car les ingénieurs n’aiment pas partager leur trouvailles avec leurs concurrents ni se sentir tenus de respecter des règles de productions partagées pendant leurs recherches. De plus, les solutions propriétaires obligent les clients (nous) à consommer plus : plus de supports, plus d’outils, plus de contenus. Ce ne sont pas les lecteurs Bétamax et V2000 qui me contrediront.

Une balise qui voit large

La balise HTML5 tente donc de ramener à l’intérieur de la norme HTML la lecture de flux vidéo, mais comme l’industrie ne se mettra probablement jamais d’accord sur un codec lisible partout, la balise vidéo propose comme solution de pouvoir mettre à disposition plusieurs flux vidéos, avec plusieurs codecs pour faire face à un maximum de cas de figure.

Ainsi, une balise vidéo de base pourra être codée comme ceci :

<video width="100%" height="320" controls id="lefilm">
 <source src="IMG/mp4/philips_v2000_video-recorder.mp4" type="video/mp4">
 <source src="IMG/webm/philips_v2000_video-recorder.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Ici, deux fichiers sont associés à la balise, permettant de couvrir un grand nombre de navigateurs récents.
La balise <source> contiendra en effet le lien vers le fichier vidéo avec comme informations supplémentaire le type de fichier ou "mime type".

Quelques paramètres en plus

Dans l’exemple ci-dessus, les boutons de contrôles apparaissent parce que l’option "controls" a été ajoutée dans la balise ouvrante.
On peut ajouter dans cette balise d’autres attributs :
- "poster" permet d’ajouter une image d’attente : poster="monimage.jpg"
- "preload" permet de lancer le téléchargement de la vidéo dès l’affichage de la balise. Attention, ce paramètre utilise donc la bande passante du visiteur.
preload="auto"
- "autoplay" permet la lecture directe du média au chargement de la page.
autoplay="true"
- "loop" permet la lecture en boucle de la video

Le tout ensemble :

<video width="100%" height="415" controls preload="auto" autoplay="true" loop poster="monimage.jpg" id="lefilm"><source src="IMG/mp4/philips_v2000_video-recorder.mp4" type="video/mp4"><source src="IMG/webm/philips_v2000_video-recorder.webm" type="video/webm">
Your browser does not support the video tag.</video>

On en a pas fini avec la compatibilité

Cette balise est prometteuse, mais pose des problèmes pour encore quelques années car elle n’est reconnue que par les navigateurs. Un aperçu copié sur le site "caniuse.com" Donne un topo actuel. Il en ressort que la balise est reconnue par Internet Explorer depuis sa version 9.

IEFirefoxChromeSafariOperaiOS SafariOpera MiniAndroidBlackberryIE Mobile
2.1
3.22.2
4.0-4.12.3
8.04.2-4.33.0
9.05.0-5.14.0
10.025.031.06.0-6.14.17.0
Current11.026.032.07.018.07.05.0-7.04.2-4.310.010.0
Near future27.033.019.04.4
Farther future28.034.020.0
3 versions ahead29.035.0

Il faudra donc, en plus de nos deux formats déjà encodés, uploadés et renseignés dans la balise source, faire face à un cas de figure supplémentaire : le navigateur peut être trop vieux pour reconnaitre la balise <video>.
Et là, la meilleure méthode reste le lecteur flash, c’est à dire une petite application à placer sur le site et renseigner un fichier .flv dans une bonne vieille balise <object>.

<object src=squelettes/swf/flvplayer.swf"
 type="application/x-shockwave-flash"
 width="500" height="396"
 allowscriptaccess="always"
 allowfullscreen="true"/>

On ne parlera pas vraiment de simplification du code. La lutte pour la strandardisation n’est pas près de se terminer.

Par défaut et personnalisé

Moyennant ces trois compressions, upload et codage, on aura donc une balise fonctionnelle quasiment partout. On se reportera à d’autres articles pour voir comment compléter cette liste de fichiers par d’autres permettant une compatibilité complète.

La balise video, si on lui associe le paramètre "controls", fera alors apparaitre une fenêtre, des boutons play/pause, une barre de chargement et de lecture, etc.

Si on veut changer l’apparence de ces boutons, qui sont différents pour chaque navigateur par défaut, on devra passer par la déclaration de balise supplémentaires en HTML, de déclarations CSS qui vont les habiller, et de code javascript qui va permettre de rendre ces boutons actifs. Beaucoup de choses d’un seul coup, ce qui explique la popularité des plugins et players nombreux que l’on peut trouver sur le net.

Citons Video.js et MediaElement

Convertir les vidéos

Le format mp4 devient courant, mais les formats webm et ogg sont assez rarement disponibles au téléchargement. Pour générer les différentes versions d’un fichier, on aura de toutes façons besoins d’un outil de transcodage.
Citons Miro Video Converter

Un peu de lecture

Dive into html 5
Sur le site Alsacreations
Sur W3C school