Vidéo opensource HTML5

La publication de vidéo en utilisant le tag video de l'HTML5 est un sujet très en vogue sur la toile.

Introduction
L'objectif de ce billet est de décrire une méthode simple pour publier des vidéos aux formats OGG (Theora/Vorbis) ou MP4 au travers du tag HTML5 video en utilisant les scripts javascript de videojs.com. Ces scripts ont la particularité d'avoir un système de fall-back pour les navigateurs incompatibles avec HTML5 (Internet explorer 6,7,8) qui lance automatiquement la lecture de la vidéo en utilisant FlowPlayer qui est un lecteur shockwave-flash open source en GPL 3.0.

Pour commencer un exemple

Étape 1: télécharger des décompresser les outils
Téléchargez le javascript de videojs.com, décompresser et copier les fichiers "video-js.css" et "video.js" vers un dossier d'un serveur WEB. Téléchargez le fichier exemple.html qui sera le point de départ, il contient le code nécessaire pour la publication de vidéo. Pour garantir le fall-back, il faut également télécharger FlowPlayer et le décompresser dans un dossier flowplayer au même endroit que vous avez déposez les javascripts sur le serveur WEB.

Étape 2: convertir la vidéo de MP4 en OGG (Theora/Vorbis)
Maintenant que vous avez déposez les 3 fichiers de base sur votre serveur web, il faut préparer la vidéo dans les formats nécessaires. Je pars du principe que vous avez une vidéo en format MP4 (H.264/AAC), si vous ne savez pas obtenir une vidéo dans ce format, vous trouverez les informations nécessaires dans le billet suivant: vidéos conversions et éditions gratuites. Le problème est maintenant de convertir la vidéo MP4 en OGG. La méthode la plus simple est d'utiliser le projet OpenSource ffmpeg2theora. Dès que vous aurez téléchargé et installé ffmpeg2theora vous aurez un outil de conversion sans interface graphique, uniquement en ligne de commande, qui permet de convertir depuis de nombreux formats des vidéos vers le format OGG. Pour utiliser ffmpeg2theora simplement lancer la commande ffmpeg2theora suivie du nom du fichier que l'on désire convertir exemple:
ffmpeg2theora mavideo.mp4
Vous trouverez dans le même dossier que mavideo.mp4 une seconde video mavideo.ogv. Pour obtenir l'image de départ de la vidéo, il faut faire un fichier png de l'image de départ de la vidéo mavideo.png ceci peut être fait avec l'option "export frame" de MpegStreamClip. Il faut maintenant renommer mavideo.ogv en mavideo.ogg et copier le fichier mp4, le fichier ogg et le fichier png sur le site WEB.

Étape 3: publier sa vidéo
Maintenant que tous les éléments sont réunis (fichiers vidéos, javascripts, etc ...) et que tout est déposé sur un serveur WEB, il est temps de modifier le fichier exemple.html de la manière suivante:
Rechercher et remplacer dans tout le fichier le texte suivant:
http://iphil.ch/spec/html5video/trailer_test
Par le lien vers le fichier video que vous avez déposez sur votre site WEB
http://votreSiteWeb/votreDossier/mavideo

Rechercher et remplacer dans tout le fichier le texte suivant:
http://www.iphil.ch/spec/html5video/flowplayer
Par le lien vers l'emplacement de flowplayer sur votre serveur WEB
http://votreSiteWeb/votreDossier/flowplayer

Il faudra encore adapter la taille de largeur et hauteur à la taille de votre vidéo.
Rechercher et remplacer dans tout le fichier la largeur:
640
Par la largeur de votre film

Rechercher et remplacer dans tout le fichier la hauteur:
360
Par la hauteur de votre film
La vidéo pourra être visionnée directement en utilisant: http://votreSiteWeb/votreDossier/exemple.html

Étape 4: Exemple
http://www.iphil.ch/spec/html5video/conffriportail_martignoni.html