Ma présentation à LGM 2007 sur le Web - le making of
Par Alexandre le mercredi, mai 9 2007, 13:12 - Graphisme - audacity - ffmpeg - flash video player - mencoder - mpeg4 - xvidcap
Question de ne pas oublier comment j'ai fait pour la prochaine fois (et m'épargner les recherches et les essais que je viens de terminer), voici comment ma présentation à LGM est passée de l'école Polytechnique à mon blogue.
1. Enregistrement audio
J'ai d'abord enregistré ma présentation à l'aide de mon walkman, directement en MP3. (pour les curieux, j'ai un iRiver iHP-120, dont la particularité est de lire le format libre Ogg Vorbis en plus d'avoir une prise pour un micro externe)
2. Enregistrement vidéo
Ma présentation a été réalisé avec OpenOffice.org Impress. Je devais donc trouver un moyen de la convertir en vidéo.
J'ai utilisé xvidcap pour capturer à l'écran ma présentation, simplement en revisionnant mes slides une à une en écoutant l'enregistrement que j'avais fait de ma présentation sur mon walkman. Résultat : un fichier MPEG d'une vingtaine de minutes, en résolution 640 x 480. Pénible de se réécouter soi-même. :)
Capture d'écran de l'opération:

Pour installer xvidcap sous Fedora 6, ouvrir une fenêtre de terminal et pitonner :
yum install xvidcap
Toujours sous Fedora 6, si ça ne fonctionne pas, installez le dépôt de paquetages Livna - vous en aurez probablement besoin plus loin pour mencoder et ffmpeg :
rpm -Uhv http://rpm.livna.org/livna-release-6.rpm
puis
rpm --import http://rpm.livna.org/RPM-LIVNA-GPG-KEY
3. Édition audio
Ayant démarré l'enregistrement avant ma présentation et l'ayant terminé plusieurs minutes après, mon fichier audio était trop long. Édition dans Audacity.
Pour installer Audacity, toujours sous Fedora 6 :
yum install audacity
4. Édition vidéo
Ici commencent les manipulations avec mencoder et ffmpeg, deux outils d'édition vidéo redoutablement efficace en ligne de commande. Pour les installer :
yum install ffmpeg mencoder
Mon fichier vidéo a 16 secondes de moins que mon fichier audio. Que faire ?
J'ai d'abord extrait une séquence de 16 secondes de la fin de mon fichier, avec mencoder (les dernières minutes de la séquence vidéo affiche le titre de ma présentation). Le paramètre -ss qui suit est la position dans la séquence vidéo, 16 secondes avant la fin, dans le format hh:mm:ss.
mencoder -ss 00:21:54.000 -oac copy -ovc copy FichierSource.mpg -o 16secExtrait.mpg
J'ai ensuite joint mon fichier vidéo à cet extrait de 16 secondes, donnant ainsi un vidéo de 16 secondes plus long que l'original :
mencoder -oac copy -ovc copy -o VideoFinal.mpg FichierSource.mpg 16secExtrait.mpg
5. Conversion vidéo en MPEG4
Prochaine étape : la conversion du vidéo en MPEG4 avec l'ajout de la piste audio (mon fichier MP3).
Première version, en gardant la résolution originale de 640 x 480 :
mencoder VideoFinal.mpg -ovc lavc -lavcopts vcodec=msmpeg4v2 -audiofile Audio.mp3 -oac copy -o VideoHigh.mpg
Deuxième version, identique mais en réduisant la résolution à 320 x 240 :
mencoder VideoFinal.mpg -vf scale=320:240 -ovc lavc -lavcopts vcodec=msmpeg4v2 -audiofile Audio.mp3 -oac copy -o VideoLow.mpg
Notez que j'ai utilisé le code msmpeg4v2 pour l'encodage du vidéo. Je n'aime pas particulièrement Microsoft, mais il semble que ce format permet la lecture sous MacOS X et Windoze sans que DivX soit installé. Ça va éviter que des fans fachés sombrent dans la violence après ne pas avoir pu visionner mon vidéo (c'est peu probablement, mais néanmoins possible !)
6. Version Flash
Ça se termine avec la partie la plus casse-tête : intégrer le vidéo à l'article de mon blogue, l'idée étant de proposer le vidéo de manière plus conviviale qu'un lien vers les deux fichier MPEG4.
D'abord, convertir, le vidéo au format FLV :
ffmpeg -i VideoLow.mpg -ar 22050 -ab 32 -f flv -s 320x240 -aspect 4:3 -y VideoFlash.flv
Ensuite, vous pourrez vouloir ajouter des métadonnées Flash à votre fichier vidéo, question de permettre un affichage correct de la progression et de la durée totale (dans mon cas, avec le visionneur Flash que j'ai choisi, ça n'a pas fait de différence). FLVTool2 vous permettra d'accomplir ceci, paquetage d'installation RPM pour Fedora 6 trouvé sur rpm.pbone.net.
La commande pour l'ajout des métadonnées est donc :
cat VideoFlash.flv | flvtool2 -U stdin VideoFlashPourWeb.flv
Ensuite, une fois que vos fichier vidéo sont sur votre serveur Web, vous pouvez installer un visionneur vidéo Flash. J'ai choisi le Flash Video Player 3.7 de Jeroen Wijering. C'est gratuit pour une utilisation non commerciale, instructions d'installation sur le site. En gros, il s'agit seulement de décompresser quelques fichier sur votre serveur Web, à partir du fichier ZIP fourni.
C'est presque fini ! Il ne vous reste qu'à insérer le code approprié dans votre billet, en changeant évidemment la référence au fichier FLV (lgm2007_flash.flv ci-dessous) et à l'image preview du vidéo (lgm2007_preview.jpg dans cet exemple). Il y a également une série de paramètres que vous pouvez modifier, notamment la taille de la fenêtre vidéo. Pour une séquence de 320x240, la taille correcte est de 320 x 260, en tenant compte de la barre de défilement du visionneur Flash.
Code à insérer, sous Dotclear 2.0 en mode wiki (de là la première et la dernière ligne pour annoncer le début et la fin du code HTML) :
///html
<script type="text/javascript" src="/public/video/flash_flv_player/swfobject.js"></script>
<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject("/public/video/flash_flv_player/flvplayer.swf","single","320","260","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","/public/video/lgm2007_flash.flv");
s1.addVariable("image","lgm2007_preview.jpg");
s1.write("player1");
</script>
///
Et voilà !
Merci à Wayne de m'avoir enligné sur mencoder !
Commentaires
Bjr :) merci pour ce billet gfort intéressant :) il y a cependant quelques poins obscurs : "de la la premiere et la derniere ligne pour annoncer le debut et la fin du code html" ... qu'entnds tu par là ? bonne cntinuation :)
Paraphrasons. :) Pour insérer du code HTML dans un billet sur un blogue qui roule avec Dotclear (et dont la mise en forme est en mode Wiki), il faut mettre "///html" avant le code HTML et "///" après le code HTML.
Quels sont les autres points obscurs ? :)
J'ajoute que j'utilise maintenant recordmydesktop pour enregistrer l'écran (http://recordmydesktop.iovar.org/) plutôt que xvidcap. C'est une meilleure solution : beaucoup moins vorace en ressources, produit des Ogg Vorbis, enregistre le son...