Le blog de Jean David TECHER, un Réunionnais à Saint-Priest/Lyon

FlatPress est comme on le désigne dans le jargon des CMS, un CMS FlatFile, c'est-à-dire sans bases de données. Le contenu du site est stocké dans des fichiers textes...

Je l'ai testé en local sur ma machine. Il est vraiment simple pour quelqu'un qui veut avoir un blog aussi simple que possible sans trop de prétention

Pendant ce week-en de Pâques, j'ai donc profité pour coupler mon serveur lighttpd + PHP avec xcache...J'en ai aussi profité pour essayer de trouver les paramètres adéquates pour permettre de streamer depuis mon serveur de Montpellier - là où sont mes vidéos personnelles - pour une réception depuis mon portable à Antibes...

Contenu de ma bande passante à Antibes, la ligne de commande suivante a donné de bons résultats...

La lecture à Antibes se fait bien sûr depuis le lecteur Flash FlowPlayer depuis une simple page Web...

ffmpeg -y -i [InputFile].[format] -vcodec libx264 -qmin 10 -qmax 50 -vpre normal -s 320x240 -ar 11025 -ab 32k [OutputFile].mp4 

Le temps de réponse est intéressant. J'ai aussi essayé sans redimensionner la vidéo d'entrée. Là aussi celà s'est montré intéressant.

Bon il est 18h00 passé. Je viens juste d'envoyer mon tutorial à l'un des développeurs de flowplayer concernant l'injection du bouton play dans une splash image...

J'espère qu'il sera accepté :).

Personellement ça me ferait plaisir que d'avoir participé de manière vraiment Light Weighty comme on dit à l'un des lecteurs Flash les plus populaires du moment...

Mise à jour du billet au 2009-04-14: après relecture et approbation, ma petite contribution devrait paraître sur le site demain en journée. Elle sera lisible sur http://flowplayer.org/tutorials/generating-thumbs.html. On devrait voir la photo de Simba mais caché par le bouton play......Simba donne aussi de sa contribution mais préfère rester anonyme...Celà concerne en fait ce que je relate dans mon précédent billet

Les utilisateurs de FlowPlayer savent que parfois, le splash screen et le bouton play pour des raisons de commodités sont souvent séparés. Ceci requiert donc de gérer dans son code html/css, deux images: le slash qui est sur le vidéo avant son lancement et le bouton play....

Il y a plusieurs moyens de fusionner les deux images. Ici je propose de le faire en une seule passe et en utilisant ffmpeg puisque c'est l'outil par excellence avec mencoder pour convertir en mp4 ou flv.

Quand on dispose de FlowPlayer, on a souvent un plash screen comme ci-dessous.

Fig 1 - Exemple de splash d'origine pour lecture

Pour information cette image a été générée grâce à la commande suivante utilisant ffmpeg

ffmpeg -y -i simba-200904092315.mp4 -an -ss 00:00:14.35 -r 1 -vframes 1 -f mjpeg  simba-200904092315-withoutplay.png

J'ai donc ici extraite l'image située au bout de 14 secondes et 35 centièmes depuis le début de la vidéo...

Maintenant on souhaite incorporer le bouton suivant

Fig 2 - Bouton à incorporer à l'image (Fig 1)

Cette image est issue du site de flowpayer disponible à http://flowplayer.org/img/player/btn/play_text.png. C'est sûrement pas moi avec mes talents de graphiste qui réussirait à la faire ...

Si on dispose d'une version de ffmpeg où vhook est disponbile - option --enable-vhook - il suffira alors de faire

ffmpeg -y -i simba-200904092315.mp4 -an -ss 00:00:14.35 -r 1 -vframes 1 -f mjpeg  \
-vhook '/usr/lib/vhook/imlib2.so -x W/2-52  -y H/2-20  -i /root/play_text.png' simba-200904092315-withplay.png 

On obtient alors l'image suivante:

Fig 3 - Injection du bouton dans l'image

En fait tout tient dans -vhook '/usr/lib/vhook/imlib2.so -x W/2-52 -y H/2-20 -i /root/play_text.png'. Décortiquons ces options:

• -vhook: ffmpeg sait qu'il va devoir utiliser ce flag qui permetd'ajouter soit du texte ou une image à une vidéo. Chaque possibilité est liée à une librairie de vhook en particulier: drawtext.so, imblib2.so etc....Tout tient dans -vhook '..... .....'
• imlib2.so: ici c'est une image que je veux incorporer donc je précise que c'est cette librairie que je dois utiliser. Par défaut il faut passer le chemin d'accès complet à la librairie d'où /usr/lib/vhook/imlib2.so

Il faut maintenant positionner mon image. Je dois donc préciser les coordonnées sur l'image. C'est ce que je fais en utilisant les flags -x ??? et -y ???

Comme je veux centrer mon bouton "play", je dois commencer par connaître ses dimensions. C'est ce que j'obtiens en faisant

root@olivia:/var/www/download# imgsize play_text.png 
width="104" height="40"

Mon bouton play a donc les dimensions 104x40

Dans la portion de code "-x W/2-52 -y H/2-20 -i ....png", on a donc

• -x W/2-52: avec
  • -x: position en x
  • W: correspond à Width (longueur) de l'image. C'est une option de vhook par défaut pour désigner la longueur de l'image.
  52: c'est simplement 104/2

Il sera aussi pour -y H/2-20 avec H désignant Height la hauteur de mon image et 20=40/2

Quant à "-i ...png", c'est l'image que je souhaite incorporer.