La balise vidéo en pratique
L’une des nouveautés de HTML5 est l’implémentation d’une balise « vidéo », tout le monde en a plus ou moins parlé mais dans les faits, ça donne quoi ?
Étant depuis deux jours dans l’univers des codecs vidéo, je me suis simplement demandé comment mettre en pratique cette nouvelle fonctionnalité.
Tout d’abord, je ne savais tout simplement pas comment insérer cette balise : Une petite recherche sur la toile et hop une réponse que je mets en pratique ici. Grande surprise ça fonctionne, je ne sais pas si c’est la meilleure méthode mais celle-ci me convient pour le moment 
.
Comme j’ai plusieurs vidéos sous différents codecs en stock, je me suis dit qu’il serait de bon augure de les diffuser afin de connaître le comportement des navigateurs face à cette nouvelle balise.
Et voilà comment on fait un article avec rien ( ou presque ).
Pour le coup, le test se fera instantanément puisque vous pouvez juger le comportement de votre fureteur face aux différents codecs en temps réel, formidable n’est-ce pas ?
H264 / AAC / MKV :
Syntaxe :
<video width="360" controls="controls"> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.mkv" type="video/mp4" /> </video>
VP8 / Ogg audio / WebM
Syntaxe :
<video width="360" controls="controls"> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.webm" type="video/webm" /> </video>
Theora / Ogg audio / Ogg :
Syntaxe :
<video width="360" controls="controls"> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.ogg" type="video/ogg" /> </video>
All in one :
Syntaxe :
<video width="360" controls="controls"> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.mkv" type="video/mp4" /> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.webm" type="video/webm" /> <source src="http://ubunblox.free.fr/UbunBlox/Sintel_short.ogg" type="video/ogg" /> </video>
Comportement des navigateurs :
Mettre une vidéo sur son site c’est bien, mais savoir quel navigateur est capable de lire cette vidéo c’est mieux ! Le choix du codec à ici une grande importance, comme vous allez le voir seul le codec Theora est lu correctement par l’ensemble des navigateurs utilisés ci-dessous :
- Firefox : Theora.
- Opera : VP8, Theora.
- Chromium : H264, VP8, Theora.
- Midori : H264, VP8, Theora.
Je n’ai pas eu l’occasion de tester les fureteurs de Microsoft et d’Apple… Vous savez sûrement pourquoi ! D’ailleurs il serait peut être intéressant de connaitre l’attitude de Safari et d’Internet Explorer face à cette balise vidéo.
D’après ce test, il semble logique de diffuser ses vidéos en utilisant le codec Theora. Malheureusement ce n’est pas le plus performant : L’encodage avec Arista par exemple ( voir ici ) ne se fait que sur un thread et reste beaucoup plus volumineux que le VP8 quand on utilise le profil ‘Best‘. Il lui reste l’avantage indéniable d’être le seul codec ‘multi-navigateurs‘…
Personnellement, je trouve que la situation n’est vraiment pas en faveur des utilisateurs quand on fait le point :
- La vidéo doit être hébergée ( par ses propres moyens… ), ça prend donc une place non-négligeable sur le serveur.
- Seul le codec Theora permet une diffusion à grande échelle.
- Le codec Theora est l’un des moins performant.
- Flash, Youtube et compagnie ont encore de beaux jours devant eux…
Un codec libre, performant, ‘multi-navigateurs’ : C’est trop demander ?
La bonne nouvelle, c’est qu’il est tout de même possible de diffuser une vidéo de manière simple en utilisant les codecs libres VP8 et Theora: C’est déjà pas mal tout compte fait…
Sachez enfin que le codec le plus performant ( H.264 ) n’est pas libre, les « libristes » devront malheureusement utiliser des codecs aux performances discutables, en attendant d’avoir mieux.
Dans la même catégorie :
