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.