Des vidéos avec HTML5 & FFmpeg
Confronté au problème de la mise en ligne de vidéos, je me suis intéressé à la balise <video> d’HTML5 et à l’encodage de vidéos. Puisqu’on peut désormais éviter Flash, profitons-en !
Encodage des vidéos
Première étape donc, l’encodage des vidéos. Pour qu’elles soient visibles sur les différents navigateurs, il faut encoder chaque vidéo au format libre WebM (VP8/Vorbis), pris en charge par Firefox 4+, Chrome 6+ et Opera 10.6+, et au format mp4 (h264/mp3) pour Safari 3+ et Internet Eplorer 9+ :
ffmpeg -i input.avi -vcodec libvpx -acodec libvorbis -threads 4 output.webm ffmpeg -i input.avi -vcodec libx264 -acodec libmp3lame -preset slow -crf 22 -threads 0 output.mp4
Au passage, il est possible avec FFmpeg de tourner les vidéos avec l’option -vf "transpose=1" (pour tourner de 90°, =2 pour l’inverse). Voilà donc un petit script pour gérer ça et éventuellement tourner les vidéos avec l’option -r ou --rotate:
#!/bin/sh # -*- coding: UTF8 -*- rotate=0 while true; do case $1 in -r | --rotate) rotate=1; shift ;; *) break ;; esac done if [ $rotate == 0 ] then for i in "$@" do ffmpeg -i $i -vcodec libvpx -acodec libvorbis -threads 4 ${i/AVI/webm} ffmpeg -i $i -vcodec libx264 -acodec libmp3lame -preset slow -crf 22 -threads 0 ${i/AVI/mp4} done else for i in "$@" do ffmpeg -i $i -vf "transpose=1" -vcodec libvpx -acodec libvorbis -threads 4 ${i/AVI/webm} ffmpeg -i $i -vf "transpose=1" -vcodec libx264 -acodec libmp3lame -preset slow -crf 22 -threads 0 ${i/AVI/mp4} done fi exit
Création de la page web
Ensuite il reste à insérer les vidéos dans une page web. Pour cela, j’ai simplement utilisé HTML5 ★ Boilerplate comme base et suivi les conseils de diveintohtml5:
<video width="480" height="640" controls> <source src="videos/dscn0470.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="videos/dscn0470.webm" type='video/webm; codecs="vp8, vorbis"'> </video>
