Cet article ne prétend nullement au titre de didacticiel. Son auteur n'est pas un professionnel et son seul but est de partager le résultat de ses recherches avec le visiteur qui voudra en faire son profit. Le langage est le plus simple possible, les explications basiques et sans doute tout cela paraîtra-t-il simpliste et même naïf à un technicien averti. Peu importe ! l'essentiel est de se faire comprendre du plus grand nombre.

D'autre part, la rapidité des progrès en informatique est telle qu'il est probable que tout ce qu'indique cette page rédigée en septembre 2009 se trouve très vite dépassé. De même, la pérennité des liens indiqués ne peut être garantie. Enfin, l'auteur se dégage totalement de toute responsabilité concernant les éventuelles conséquences qu'une mise en œuvre erronée de ses indications pourrait entraîner pour les données, matériels et logiciels du visiteur qui désirerait s'en inspirer. Cette page n'offre que quelques tuyaux désintéressés destinés à rendre service. Pas plus.

Dans cet esprit, le lien vers cette page peut être communiqué librement. L'auteur se réserve par contre le privilège de la modifier à son gré, voire même de la fermer sans préavis si c'est nécessaire.

Cette vidéo FLV est optimisée pour un flux (streaming) de 1200 kilobits par seconde (kb/s). Si son affichage est haché, les raisons peuvent en être les suivantes : 1. votre débit entrant est trop faible, 2. cette page est trop sollicitée (plusieurs visiteurs simultanés), 3. votre fournisseur d'accès est dépassé par la surcharge du réseau au moment de l'essai et 4. cet échec peut être imputé à n'importe quelle autre défaillance matérielle ou logicielle (le choix est vaste).

Vérifiez votre débit entrant sur le site http://www.degrouptest.com/test-debit.php sachant que les performances indiquées varient parfois sérieusement d'un instant à un autre. En tout état de cause, un débit inférieur à 1500 kb/s est insuffisant pour assurer un flux raisonnable. Un haut-débit digne de ce nom se doit d'atteindre au minimum 5000 kb/s et les meilleurs fournisseurs d'accès assurent couramment et largement plus de 10000 kb/s hors des périodes d'embouteillage du réseau.

Vidéos au format FLV... pour quoi faire ?

Au moment de la rédaction de cet article (septembre 2009), l'utilisation du format FLV pour les vidéos domine largement le web aux dépens des formats employés avant l'avènement du langage Flash ; même les formats MPeg et WMV reculent progressivement devant la vague FLV en dépit de leur volume raisonnable et de leurs performances en matière de streaming. Quant aux formats vidéo de Quick Time et de Real, leur naufrage à moyen terme paraît désormais inéluctable.

Révélé au grand public par les sites spécialisés dans la diffusion en masse de vidéos (YouTube est le plus populaire), le format FLV a paru un temps réservé aux pros du net. Les choses ont commencé à évoluer avec l'apparition de convertisseurs de formats performants, gratuits et d'un maniement très simple, puis se sont précisées plus récemment avec la mise à disposition de lecteurs FLV intégrables sans grandes difficultés dans n'importe quelle page web, même codée en HTML.

1. Sa portabilité. C'est probablement son principal avantage sur les autres formats. Il est accepté aussi bien par les systèmes Windows et OS (Mac) que par la quasi-totalité des navigateurs. La seule et unique condition est que les modules Flash soient installés ; mais à l'heure où le langage Flash est de plus en plus adopté par les concepteurs de pages web, on imagine mal qu'il soit encore possible de naviguer sur Internet sans avoir jamais procédé à cette installation.

2. Son indépendance vis à vis des lecteurs de médias. Il était déjà possible d'afficher une vidéo MPeg, WMV, AVI ou autre dans une page web en cours de consultation sans qu'il soit nécessaire de basculer sur un lecteur de médias tel que Windows Media Player ou Quick Time mais c'était au prix d'un encodage assez complexe et au risque d'incompatibilités multiples à tous les échelons. Un lecteur de vidéos FLV, au contraire, fait le plus souvent partie intégrante de la page elle-même et s'affranchit ainsi de toute contrainte liée aux caractéristiques d'un lecteur séparé.

On entend souvent glorifier outrageusement la compacité des fichiers vidéo FLV. D'une part d'autres formats permettent également une compacité similaire ou peu s'en faut, et d'autre part la recherche systématique de cette compacité ne va pas sans altérer plus ou moins gravement la qualité de l'image ; il suffit pour s'en convaincre de visionner certaines vidéos de YouTube (et mieux vaut dans la plupart des cas éviter l'affichage en plein écran à moins de se satisfaire de n'importe quoi). Comme nous le verrons au chapitre suivant, il est plus sage de rechercher au moment de la conversion d'un fichier vidéo en FLV une définition et un taux de flux raisonnables pour que la qualité de l'image et la fluidité du mouvement restent confortables ; cette recherche génère inévitablement des fichiers FLV à peine plus compacts que ce qu'ils seraient dans certains autres formats.

Préparation du fichier vidéo FLV

Le FLV n'étant pas un format natif, il faut nécessairement partir d'une vidéo d'un format différent et la convertir en FLV. De nombreux convertisseurs sont disponibles gratuitement sur le web mais encore faut-il faire le bon choix. Au moment où ces lignes sont rédigées, le convertisseur Free FLV Converter semble dominer ses concurrents par ses performances, sa facilité d'emploi, son paramétrage précis et sa rapidité. Il est téléchargeable à partir de plusieurs sites et notamment celui-ci :

Free FLV Converter s'installe en un clin d'oeil et le seul petit problème rencontré à ce jour est qu'à chacun de ses lancements il faut annuler deux tentatives de localiser Smartsound Quicktracks Plugin (qui ne nous est d'ailleurs d'aucune utilité). Cette petite formalité accomplie, l'écran du convertisseur apparaît et le reste est un jeu d'enfant. Les allergiques à la langue anglaise noteront avec plaisir que le choix du français est proposé. Il ne reste alors qu'à cliquer sur le bouton "Conversion en FLV".

Quels que soient les paramètres de conversion qui vont être choisis (voir paragraphe suivant), s'imaginer que la vidéo cible sera d'une meilleure qualité que la vidéo source est une utopie. Les informations d'image et de son vont subir une nouvelle compression qui va forcément les altérer, même si cette altération reste mineure et indécelable. Il est donc souhaitable que le fichier source soit de la meilleure qualité possible.

Dans tous les cas où l'origine de la vidéo source ne permettra pas de faire la fine bouche (fichier fourni par quelqu'un d'autre, extrait tel quel d'un camescope ou téléchargé sur le net), il faudra bien s'en accommoder et faire avec. Mais à chaque fois que la création de la vidéo source sera sous contrôle (fichier issu d'un banc de montage vidéo tel que Pinnacle ou Adobe Première par exemple), on prendra soin de générer une vidéo de la meilleure qualité possible, c'est à dire de grande taille (définition) et ayant subi une compression minimale, par exemple un fichier AVI en 768 pixels de large ou un MPeg de la même taille et prévu pour un flux élevé. La génération de tels fichiers est certes longue et il occupent un espace pléthorique sur le disque dur mais peu importe puisque leur conversion en FLV va permettre de leur donner des caractéristiques raisonnables avant leur mise en ligne.

Encore une fois, les paramètres les plus importants seront les dimensions d'affichage de la vidéo FLV et son taux de flux (ou bitrate) en kilobits par seconde (kb/s).

1. Dimensions : insistons d'abord sur le fait que la possibilité de redimensionner la fenêtre de visualisation vidéo au moment de son intégration sur la page web doit être écartée car elle ne peut que nuire à l'aspect de l'image. Il est donc indispensable de prévoir les dimensions finales de la vidéo avant sa conversion en FLV. À titre indicatif, YouTube affiche par défaut les vidéos dans une fenêtre de 640 pixels de large quel que soit le rapport largeur/hauteur de l'image, ce qui donne 640x360 pour du 16/9 et 480x360 pour du 4/3. Les préférences de l'auteur vont vers 640x360 pour le 16/9 (ce sont les dimensions de la vidéo présentée en tête de cette page) et 640x480 pour le 4/3. Cependant, si le sujet de la vidéo ne nécessite pas forcément de la voir en détail, des dimensions moindres peuvent suffire, comme 320x176 pour le 16/9 ou 320x240 pour le 4/3. Ces derniers chiffres doivent toutefois être considérés comme un minimum dans la mesure où certains visiteurs configurent leur affichage général en haute définition même avec un écran de taille modeste. Un dernier mot concernant la possibilité de visionner une vidéo en plein écran : cette fonction reste un gadget qui altère considérablement la netteté de l'image. Le visiteur est libre d'en prendre le risque mais le développeur ne doit pas s'en soucier à moins de prévoir pour son fichier un taux de flux insupportable même avec une liaison de très haut débit.

2. Taux de flux (ou bitrate) : tout dépend évidemment de quoi l'on se contente, mais pour le développeur de pages web soucieux d'offrir au visiteur une image sans trop de pixellisation, un mouvement fluide et un streaming confortable, un taux de 1200 kilobits par seconde (kb/s) pour une image en 640 pixels de large parait un bon compromis. Ce taux peut cependant être abaissé pour une image plus petite.

Alors bien sûr on peut se poser la question du sort de l'utilisateur dont le débit entrant est inférieur à 1500 kb/s. Malheureusement, avec un bitrate de 1200 kb/s il devra sans doute attendre que le chargement de la vidéo soit terminé ou presque pour commencer à la visionner. C'est regrettable mais que faire ?... le développeur peut-il indéfiniment s'aligner sur les configurations les moins performantes en pénalisant du même coup la majorité des visiteurs ?

Intégration de la vidéo FLV dans la page HTML

Le web présente un choix de lecteurs FLV moins vaste qu'il n'y paraît. En effet, beaucoup ne fonctionnent qu'à travers l'adresse d'un site. Leur emploi est donc potentiellement hasardeux puisqu'il rend le développeur tributaire de ce relais. Que le site fournisseur du lecteur disparaisse ou change d'adresse et le code HTML qui y fait référence devient aussitôt caduc ! Cette solution est d'autant plus inacceptable qu'il y a fort à parier que le site fournisseur du lecteur finira par succomber un jour ou l'autre à la tentation d'afficher des publicités sur la page web qui héberge son adresse. Bref, l'auteur recherchait désespérément un lecteur FLV gratuit totalement autonome et il a fini par dénicher la perle rare : player_flv_maxi.swf.

L'image de départ de la vidéo présentée en tête de cette page détaille ses avantages et donne l'adresse de son fournisseur mais on peut aussi le télécharger directement à l'adresse suivante :

Recommandation : pour que le code indiqué plus loin soit cohérent, abréger le nom du lecteur en player_flv_maxi.swf .

Dans le but de simplifier la lecture et la compréhension du code indiqué ci-après, tous les éléments nécessaires ont été regroupés dans le même dossier que celui du fichier HTML de la page.

Attention ! quelques essais du 13 septembre 2009 semblent cependant démontrer que le fichier du lecteur de FLV player_flv_maxi.swf doit absolument se trouver dans le même dossier que le fichier de la page HTML qui l'appelle.

Pour prendre comme exemple cette page même, les six éléments (quatre indispensables et deux facultatifs) sont les suivants :

- integration_flv.html : le fichier HTML de cette page.

- player_flv_maxi.swf : le lecteur de vidéos FLV.

- bamboleo.flv : le fichier vidéo FLV lui-même.

- bamboleo_config.txt : la liste des paramètres à passer au lecteur de vidéos FLV.

- bamboleo_startimage.jpg (fichier facultatif) : l'image de départ de la vidéo.

- skin_bamboleo.jpg (fichier facultatif) : l'image de l'entourage (skin) de la fenêtre vidéo.

CODE À INSÉRER à l'endroit adéquat de la page HTML :

<object type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="660" height="380">

<param name="movie" value="player_flv_maxi.swf" />

<param name="allowFullScreen" value="true" />

<param name="FlashVars" value="config=bamboleo_config.txt" />

</object>

type="application/x-shockwave-flash" : appel du module Flash préalablement installé dans la configuration.

data="player_flv_maxi.swf" : désignation du lecteur FLV à l'intention du module Flash.

width="660" height="380" : Largeur et auteur de la fenêtre vidéo (voir ci-dessous comment définir ces valeurs).

name="movie" value="player_flv_maxi.swf" : chemin/nom du lecteur FLV.

name="allowFullScreen" value="true" : passage en plein écran autorisé (interdit par défaut).

name="FlashVars" value="config=bamboleo_config.txt" : chemin/nom de la liste des paramètres à passer au lecteur vidéo FLV.

Les valeurs largeur-hauteur à indiquer pour width et height sont égales aux dimensions de la vidéo prévue au moment de sa conversion (voir plus haut) augmentées de 2 fois la largeur de l'entourage de la fenêtre (skin). La vidéo bamboleo.flv a été convertie en 640x360 et l'entourage imitation ronce de noyer fait 10 pixels de large. Les valeurs de width et height sont donc respectivement de 640+(10x2)=660 et 360+(10x2)=380. Dans le cas où aucun entourage n'est prévu, ces valeurs seront égales à celles de la vidéo telles qu'elles ont été choisies dès sa conversion.

Les paramètres indiqués dans le fichier texte bamboleo_config.txt sont aisément identifiables en les comparant à la liste complète des 60 paramètres acceptés par le lecteur player_flv_maxi. Cette liste peut être consultée à l'adresse suivante :

Une petite astuce ! Sauf erreur ou documentation incomplète, il semble qu'aucun paramètre ne soit prévu pour interdire totalement l'affichage du message de la mémoire tampon (buffering). Si comme l'auteur vous trouvez que ce message clignotant pollue la visualisation, il est facile de le rendre tout simplement invisible en intégrant au fichier texte de configuration le paramètre buffermessage= sans aucune indication derrière le signe =. Le message de la mémoire tampon n'affichera rien puisqu'il ne contient aucun caractère.

Notons enfin que le paramètre demandant l'affichage du bouton de passage en plein écran (showfullscreen=1) ne suffit pas à autoriser ce passage. Il faut également qu'il soit permis par l'instruction HTML <param name="allowFullScreen" value="true" />

C'est tout. Si cette page vous est d'une utilité quelconque, merci de le faire savoir à son auteur en quelques mots rapides. Il est toujours rassurant de savoir qu'on ne perd pas son temps en essayant simplement de partager ce que l'on sait ou que l'on découvre.

BONUS
Lecteur audio en Flash

Au cours de ses recherches, l'auteur a aussi découvert sur le net le lecteur audio mp3player écrit en langage Flash dont le look, la conception et la similitude de mise en œuvre en HTML laissent deviner que la même équipe qui a développé player_flv_maxi en est également à l'origine.

Ce lecteur gratuit peut être téléchargé à l'adresse suivante :

La page de téléchargement donne également un exemple du code d'intégration de mp3player en HTML ainsi que la liste complète des paramètres qu'il accepte (forcément moins nombreux que pour le lecteur de vidéos).

Inutile de s'attarder plus longtemps sur sa mise en œuvre. Il suffit de s'inspirer de celle de player_flv_maxi en lui apportant les modifications nécessaires.