Jusqu'aujourd'hui, intégrer de la vidéo sur un site web était plutot complexe, il fallait se confronter aux problèmes liés aux différentes plateformes, à la compatibilité des formats, à la taille importante des fichiers et aux faibles vitesses de connexion. Aujourd'hui des solutions assez simples existent, utilisant un player flash pour la diffusion et des outils gratuits pour la mise au point de la vidéo. Les séquences au format FLV sont alors visibles sur mac, windows, linux ou unix à condition d'installer le plugin flash. C'est la solution choisie par les sites de partage vidéo comme youtube ou dailymotion.

Pour diffuser sa video avec cette solution, il faut commencer par la transformer au format FLV 1.1, une solution gratuite et simple consiste à utiliser Riva Encoder, qui intègre une série de réglages courants. Si ces réglages ne suffisent pas, il faut encoder la vidéo en deux étapes avec les outils en ligne de commande ffmpeg et flvmdi (flv meta-data injector). La première étape consiste à transformer la vidéo au format FLV 1.0 avec ffmpeg, puis la passer en FLV 1.1 en ajoutant des métadonnées avec flvmdi, ce qui permettra d'avoir une barre de défilement dans le player.

Une fois la vidéo encodée, il faut choisir un player vidéo pour l'intégrer dans la page, parmi ceux existants celui de Neolao est très complet, il permet de diffuser les séquences, y compris à partir de playlists, tout en offrant la possibilité de modifier complètement l'aspect visuel du player. Comme alternative à ce player, on peut également choisir celui développé par Jeroen Wijering.

Voilà l'exemple d'une séquence (sans son) transcodée avec ffmpeg + flvmdi et le code html permettant de l'insérer dans la page :





commande ffmpeg :

ffmpeg -i spiders_4.avi -an -ss 00:00:35 -t 00:00:15 -f flv -s 320x240 spiders_extrait.flv

Voila comment se décompose la ligne de commande :

-i spiders_4.avi : fichier de départ (spiders_4.avi)
-an : désactiver l'audio
-ss 00:00:35 : commencer la transformation à partir de la 35e seconde
-t 00:00:15 : durée à prélever
-f flv : format de sortie
-s 320x240 taille souhaitée de la vidéo
spiders_extrait.flv : nom du fichier résultant


commande flvmdi :

flvmdi spiders_extrait.flv "/ehttp://urzhiata.emoc.org" /x

Ce qui signifie :

spiders_extrait.flv : fichier à traiter
"/e http://urzhiata.emoc.org" : ajouter un champ aux metadonnées avec l'adresse du site d'origine de la vidéo
/x : créer un fichier xml contenant le contenu des métadonnées
(Ces deux options ne sont pas nécessaires)


code html :

<object type="application/x-shockwave-flash" data="http://www.emoc.org/video/player_flv.swf" width="320" height="240">
    <param name="movie" value="http://www.emoc.org/video/player_flv.swf" />
    <param name="FlashVars" value="config=http://www.emoc.org/video/spiders_extrait_config.txt" />
    <param name="wmode" value="transparent" />
</object>

Le fichier spiders_extrait_config.txt contient tous les paramètres du player (couleurs, etc.), ainsi que l'url de la séquence vidéo et l'url de l'image utilisée en titre.

Voila! N'hésitez pas à faire des commentaires ou à poser des questions si ce n'est pas clair! Et si cet article vous a été utile, aidez à le faire connaître en deux clics : en lui ajoutant une "mark" sur tutmarks (en cliquant sur le chiffre dans le rond bleu!)