Utiliser le tag video HTML 5 dans WordPress

Date: 30/10/2009 | Catégories: Blog,Open-source,Video,Web | Tags: ,,,,,

HTML 5 permet l'insertion de média de type audio ou vidéo directement dans une page HTML sans avoir besoin d'autre chose qu'un navigateur compatible (Firefox 3.5 ou Chromium 4.0 par exemple). A l'heure actuelle, il n'est pas possible de créer des billets utilisant ces tags dans WordPress. Il faut donc passer par un plugin qui va nous permettre de contourner le problème et de nous apporter également un compatibilité avec les navigateurs ne supportant pas la norme HTML 5...

Le plugin en question s'appelle Degradable HTML5 audio and video, il permet l'insertion de vidéo au format .OGG (code Theora/Vorbis) et/ou .M4V (H.264/MP3) à l'aide d'un simple tag dans l'éditeur wordpress. En effet, il utilisera les méthodes d'insertions suivantes:

  • Tags HTML5
  • si le navigateur web n'est pas compatible HTML 5 alors utilisation d'un player Flash
  • si le navigateur web n'est pas compatible Flash alors utilisation d'un lien pour télécharger la vidéo

Pour conserver une compatibilité maximale avec l'ensemble des navigateurs Web, il est conseillé de convertir votre vidéo dans ces deux formats.


Imaginons que la vidéo source soit un screencast au format MPEG/DivX. La première chose à faire et de convertir la vidéo (test.mpeg), soit en utilisant un logiciel comme Handbrake (disponible sur Windows, Mac OS X et GNU/linux) ou de faire à l'ancienne, en ligne de commande (sous GNU/Linux):

[shell]ffmpeg2theora test.mpeg -o test.ogg
ffmpeg -i test.mpeg -vcodec mpeg4 -acodec mp3 -f mp4 test.m4v[/shell]

Il faut ensuite uploader les deux fichiers test.ogg et test.mp4 dans votre billet WordPress (ne pas les insérer dans votre billet). Puis récupérer l'URL (sans l'extension du fichier):

Il ne reste plus qu'a appeler le plugin Degradable HTML5 audio and video en insérant la commande suivante dans votre billet:

[ video src="http://blog.nicolargo.com/wp-content/uploads/2009/10/test" width="480" height="354" options="autobuffer controls" id="video01" ]

PS: si vous voulez que votre vidéo soit visible sur un iPhone, ne pas dépasser la résolution de 480 pixels (width).

Et voila le résultat:

  • Pingback: Philippe Scoffoni (pscoffoni) 's status on Friday, 30-Oct-09 21:03:40 UTC - Identi.ca()

  • Pingback: idoric's status on Friday, 30-Oct-09 21:17:11 UTC - Identi.ca()

  • mmu_man

    Très bonne idée, mais…
    pourquoi, oui pourquoi passer par Flash ?
    Il y a une balise très bien qui d’ailleurs fait la même chose que VIDEO, ça s’appelle EMBED, et il n’y a *pas* besoin de flash!
    (VIDEO est juste une tentative désespérée de refaire EMBED en empéchant les plugins stupides comme flash, mais c’est strictement la même chose! EMBED ne sert pas qu’à inclure du flash, mais tout média.)
    C’est si dommage de se débarasser de flash en html5 mais le laisser en fallback…

    Un EMBED SRC= »http://foo/bar.mp4″ fonctionnera très bien s’il y a un plugin, et sinon on fait un fallback de la même façon avec un lien direct. Mieux on peut faire un embed sur un .flv, tous ceux qui ont un plugin flash devraient pouvoir le voir, plus ceux qui ont un plugin vlc ou autre.

    Par contre, c’est bien d’avoir pensé à faire un lien direct parce que tout le monde n’a pas de plugin/html5, et c’est très ch*ant de devoir fouiller le code html! C’est comme ça qu’aurait toujours du être le web.

    Un bon point pour l’utilisation de ffmpeg 😉

  • Le html 5 arrive et cette revolution entraine la fin de flash… de plus en plus de vidéo donc sur internet

  • Oh oui ! A mort flash !

    Autrement, sans plaisanter, merci pour cet article, je rencontrais ce problème avec wordpress qui n’est (toujours) pas compatible avec un plugin que j’ai développé pour permettre de faire interagir texte et vidéo.

    Je vais tester avec votre solution, merci !