Apache et HTML 5

HTML5_Logo_256

Quand j’ai fais ma migration vers WordPress j’ai souhaité conserver mes vieux articles dont certains contenaient des vidéos. Non pas que ce soit « des vidéos qui tuent sa maman » mais j’voulais quand même les garder (par nostalgie  :rolleyes: ) je me suis quand même un peu cassé les dents pour faire marcher tout ça, voici ce que j’ai retenu…

A l’époque j’utilisais un player en flash. Là je me suis dit « c’est pas très moderne tout ça, faut du achteumeuleu cinq » :-p

Donc après avoir réglé le problème d’intégration de la vidéo avec l’extension MediaElement.js – HTML5 Audio and Video il restait le problème du codec.

Pour faire court il y a trois codecs pour la vidéo en HTML 5 :

  • H.264 (proprio)
  • OGG (libre)
  • Webm / VP8 (libéré par Google)

Suite à de nombreux débats et questionnements autour des brevets il semblerait (je dis bien « semblerait ») qu’il faille maintenant se diriger vers le codec Webm.

J’ai donc converti mes vidéos Webm avec l’excellent logiciel Arista sous Ubuntu. Il est dans les dépôts. Installation très facile avec un simple :

sudo apt-get install arista

Mais les vidéos en HTML 5 ne passaient pas bien sous Firefox malgré le codec webm. :-/

C’était la faute à Apache, le serveur web.
Pour qu’Apache envoie bien le contenu en HTML 5 il faut modifier les MIMES.

Modifier le fichier des MIME :

vi /etc/apache2/mods-available/mime.conf

Ajouter à la fin avant la balise de fermeture </IfModule> :

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

Redémarrer le serveur web :

service apache2 restart

 

Et ça stream. :w00t:

Si vous voulez voir ce que ça donne sur ce site il y a le nuage de mots clefs dans la barre latérale (mot cléfs : vidéo) ou directement ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

:alien: :innocent: :angry: O_o :blush: =) B-) :cry: :niark: :dizzy: :-/ -_- :-D ^^ :heart: :kissing: :lol: :ninja: :pinch: :-| :rolleyes: :-( :-o :sick: :silly: :zz: :-) :-p :unsure: :w00t: :wassat: :whistle: ;-) :wub: :sorcerer: :flowers: