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>

Commentaires