avr 15

La balise vidéo en pratique

Multimédia, Planet libre, web Ajouter un commentaire

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 :

écrit par David Lopes Ferreira

14 commentaires à “La balise vidéo en pratique”

  1. Plonk Dit:
    15 avril 2011 à 17:45

    C’est malin… Google Reader + Chromium = je vois jamais les syntaxes mais… Exactement la même chose. =D

  2. David Lopes Ferreira Dit:
    15 avril 2011 à 17:52

    @Plonk : un petit « Google Reader → Out » doit tout arranger ;)

  3. ®om Dit:
    15 avril 2011 à 20:48

    C’est bizarre j’étais persuadé que Firefox 4 lisait le WebM… Mais effectivement il ne lit pas ta vidéo dans ce format…

    La vidéo doit être hébergée, ça prend donc une place non-négligeable sur le serveur.

    Euh, oui… Mais en même temps, si la vidéo n’est pas hébergée, ça va être compliquée d’y accéder, non ?

  4. David Lopes Ferreira Dit:
    15 avril 2011 à 20:50

    @®om : En général les gens utilisent des services comme Youtube pour diffuser les vidéos… Ils ne s’occupent pas de l’hébergement !

  5. Faelar Dit:
    16 avril 2011 à 10:42

    « La bonne nouvelle, c’est qu’il est tout de même possible de diffuser une vidéo de manière simple en utilisant des codecs libres : C’est déjà pas mal tout compte fait… »

    Ca serait bien de préciser quand même que le H264 (le meilleur ou non niveau perf là n’est pas la question) n’est PAS libre.

    Alors autant je suis loin d’être pour le logiciel libre à tout prix, il y a des logiciels propriétaires intéressants, autant au niveau des formats quand on se retrouve enfermé c’est une catastrophe.

  6. David Lopes Ferreira Dit:
    16 avril 2011 à 10:48

    @Faelar : Une évidence pour moi que je n’ai pas mentionné… Je vais modifier cela ;)

  7. MaKoTo Dit:
    16 avril 2011 à 10:48

    Je dirais même plus :
    Les gens qui ne s’occupent pas de l’hébergement et utilisent des services comme Youtube ne s’occupent pas du format d’encodage… voire même ne savent pas ce que c’est.
    La place que les vidéos prennent sur le serveur n’a pas d’importance pour l’auto-hébergé ^^

  8. David Lopes Ferreira Dit:
    16 avril 2011 à 10:50

    @MaKoto : « La place que les vidéos prennent sur le serveur n’a pas d’importance pour l’auto-hébergé ^^ » pas si sûr que ça ….

  9. Psykoh Dit:
    21 avril 2011 à 8:10

    Il me semblait que firefox pouvait lire le webm du coup j’ai fait quelques test et sur youtube (une fois activé le html5 biensur) les vidéos passent en webm sans soucis sur firefox (exemple ici : http://www.youtube.com/watch?v=0sTjnfnkmLg&feature=watch_response).
    Peut-être y-a-t il une erreur dans ta config ?

  10. David Lopes Ferreira Dit:
    21 avril 2011 à 8:47

    @Psykoh : Un petit

    « $ wget http://ubunblox.free.fr/UbunBlox/Sintel_short.webm »

    Suivi d’une lecture dans vlc ou mplayer t’en aurait appris bcp ;) Il s’agit bien du codec de google…

  11. Psykoh Dit:
    21 avril 2011 à 11:33

    Je ne met pas en doute le codage de la vidéo mais je suis surpris que certaines vidéos webm passent sous Fx et pas d’autres, il y a peut-être une config spécifique à faire dans la balise html …

  12. David Lopes Ferreira Dit:
    21 avril 2011 à 11:41

    @Psykoh : Il ne me semble pas que Firefox ne supporte pas le webm nativement qui au passage est un codec made in google. Une histoire de support de codec qui n’avance à rien d’un point de vue utilisateur malheureusement… H264, VP8, Theora : Une guerre des codecs qui nous embête bien pour le moment !

  13. oblab Dit:
    28 mai 2011 à 19:44

    Je confirme, Firefox est censé lire le webm, voir :
    http://www.alsacreations.com/xmedia/tuto/exemples/html5/video/exemples.html
    http://hacks.mozilla.org/2010/05/firefox-youtube-and-webm/

    Mais j’ai le même problème sur une de mes pages, impossible de comprendre pourquoi ?

  14. oblab Dit:
    28 mai 2011 à 19:49

    Ah les petits malins, fallait mettre ceci dans le .htaccess :

    AddType video/ogg .ogv
    AddType video/mp4 .mp4
    AddType video/webm .webm

    Et là miracle, Firefox lit les webm

Laisser une Réponse

⇧