> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Des vidéos FLV sur son site Web > Lecture du tutoriel

Des vidéos FLV sur son site Web

Par

Sébastien de la Marck (Thunderseb)

Mise à jour : 29/03/2010

Difficulté : Facile Facile

1 617 visites depuis 7 jours, classé 85/795

Dans ce tutoriel, je vais vous expliquer comment créer une vidéo de type FLV et comment la lire via une page HTML. Comme vous le savez, le FLV est un format vidéo de type streaming (qui se lit en parallèle au téléchargement). Le FLV est la propriété d’Adobe, et est largement utilisé sur les sites comme Youtube, Vimeo ou Dailymotion.

Attention, ne soyez pas effrayé par le nombre de sous-parties que comporte ce tutoriel. En effet, j’ai essayé d’être le plus complet possible, et j’explique plusieurs méthodes. Voici un résumé destiné à vous aider.

Si vous possédez Flash (à partir de la version 8), lisez :

FLV, SWF avec Flash
Convertir : avec Flash Video Encoder

Si vous n’avez pas Flash, lisez :

Convertir : avec WinFF et FFmpeg
Lire : avec Neolao FLV Player

Si vous rencontrez des problèmes avec le tutoriel, lisez :

Annexe : Service après-vente

Retour en haut

Sommaire du tutoriel :

Payant ou pas ?
FLV, SWF avec Flash
Convertir : avec Flash Video Encoder
Convertir : avec WinFF et FFmpeg
Lire : avec Neolao FLV Player
[Annexe] Service après-vente
[Annexe] Injecter des métadonnées

Retour en haut

Payant ou pas ?

Pour lire des fichiers .flv, il faut passer par une animation Flash (.swf).

Mais je n’ai pas Flash moi, et je n’ai pas envie de l’acheter ! Que faire ?

Ne vous inquiétez pas, Flash n’est pas nécessaire. Il existe des convertisseurs gratuits produisant du FLV et des animations de lecture toutes faites.

Si vous avez Flash 8, vous avez également un logiciel appelé FLV Encoder. Je vous expliquerai comment vous en servir si vous ne souhaitez pas passer par Flash pour faire votre vidéo et votre animation de lecture.

Au fait, pourquoi le FLV et pas du MOV ou du WMV ?

J’ai dit que pour utiliser le FLV, il fallait une animation SWF permettant de lire la vidéo comme avec un lecteur normal (avec les options « lire », « pause », « volume », etc.). Le SWF est lisible avec Flash Player, qui est disponible pour Windows, Mac et Linux. Bref, partout, au contraire des autres formats vidéo. Et puis, Flash Player est disponible d’origine dans Internet Explorer, les utilisateurs n’auront pas besoin de télécharger un lecteur comme QuickTime.

Et au fait, je n’ai jamais vu ce genre de truc. C’est vraiment utilisé ?

Oui oui, c’est utilisé. C’est la technique qu’emploient les sites d’hébergement de vidéos comme Google Video, Dailymotion, ou encore YouTube.

Retour en haut

FLV, SWF avec Flash

Flash 8 et Flash CS3 permettent de créer très facilement des lecteurs de fichiers *.flv. Un outil de création est à disposition. Nous allons donc voir comment nous en servir.

Création de l’animation de lecture

Commencez par ouvrir Flash 8. Une fois que c’est fait, dirigez-vous vers le menu Fichier puis cliquez sur Importer puis sur Importer dans la scène.

Une fenêtre d’exploration s’ouvre. Recherchez votre fichier vidéo (*.mpeg, *.avi) préalablement créé.

La fenêtre Sélectionner le fichier vidéo apparaît. Cliquez sur Suivant. Dans Déploiement, sélectionnez la première option (une indication claire, nette et précise apparaît dans le cadre à droite

Cliquez sur Suivant.

Dans Codage, définissez le codage qui sera employé. C’est un peu à vous de voir ce que vous voulez en faire. Moi, je vais mettre en qualité élevée pour Flash Player 8. Vous pouvez mettre en qualité moyenne, afin d’alléger un peu le fichier.

Cliquez sur Suivant.

Maintenant, dans la partie Réhabillage, nous allons définir l’apparence du contrôleur de lecture qui sera associé à la lecture du fichier FLV. Il y a bien assez de types différents, faites votre choix. Moi, je garde celui par défaut.

Cliquez derechef sur Suivant.

Flash vous propose une petite récapitulation des opérations avant de les effectuer. Cliquez sur Terminer si tout vous semble bon.

Flash vous impose d’enregistrer votre fichier *.fla. Faites-le, et donnez-lui un nom définitif.

Voilà, Flash commence l’encodage de la vidéo :

Et hop, vous vous retrouvez avec une interface de lecture dans votre animation *.fla.

Quelques réglages supplémentaires

Cette interface de lecture est en réalité un composant Flash, qui s’appelle FLVPlayback. Comme tous les composants, il est préparamétré, et il vous est bien sûr possible de modifier ces paramètres.

Pour y accéder, cliquez sur le composant FLV. Ensuite, ouvrez le panneau Propriétés (Ctrl + F3) et cliquez sur l’onglet Paramètres.

Là-bas, vous avez accès à tous les paramètres du composant :

Ainsi, vous pouvez modifier l’autoPlay (démarrage automatique), le contentPath (si vous voulez indiquer un autre chemin pour la vidéo)...

Si vous avez choisi une apparence de lecteur qui se place par-dessus la vidéo, Image utilisateur

comme ici, je vous recommande de mettre le paramètre skinAutoHide à false. Ainsi, le contrôleur de lecture n’apparaîtra que quand la souris se trouve sur la vidéo. C’est plus joli et plus commode pour regarder la vidéo.

Mise en place de l’animation

Enregistrez votre fichier *.fla, et publiez-le en SWF (Ctrl + Entrée).

Vous disposez normalement de 3 fichiers :

le *.swf de l’animation (même nom que le *.fla) ;
le fichier vidéo *.flv ;
le fichier du contrôleur de lecture *.swf.

Vous devez les placer tous les 3 sur votre FTP, sans changer les noms, sinon les liens internes vont être brisés.

Faites très attention : le fichier qui contient le contrôleur de lecture doit absolument se trouver dans le même dossier que celui de la page HTML qui lit la vidéo. Si vous voulez placer ce fichier autre part, vous devez spécifier son URL dans le paramètre skin du composant (voyez la sous-section juste ci-dessus).

Pour placer l’animation sur votre page, utilisez ce script, sans embed :

Code : HTML - Lecture Flash

<div>
  <object data="fichier.swf" type="application/x-shockwave-flash" width="320" height="280">
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="movie" value="fichier.swf" />
    <param name="menu" value="false" />
    <param name="quality" value="high" />
    <param name="scalemode" value="noborder" />
    <param name="wmode" value="transparent" />
    <p>Macromedia Flash Player 8 est nécessaire pour lire ce fichier.</p>
  </object>
</div>

Petit aperçu de mon animation.

Retour en haut

Convertir : avec Flash Video Encoder

En fait, Flash Video Encoder est un petit convertisseur, livré avec Macromedia Flash Professional 8.

Commencez par ouvrir le petit logiciel. Il se trouve théoriquement ici :
Démarrer > Programmes > Macromedia > Macromedia Flash 8 Video Encoder.
Si vous ne le trouvez pas dans le menu Démarrer, utilisez l’Explorateur :
C:\Program Files\Macromedia\Flash 8 Video Encoder.

Il vous faut aussi le QuickTime Player.

Vous y êtes ? Parfait.

Cliquez sur le bouton Ajouter pour ajouter une vidéo à convertir en FLV. Flash Video Encoder permet de convertir plusieurs vidéos à la suite. C’est pour cela qu’il est construit comme un logiciel de gravure, avec une liste des fichiers à graver, sauf qu’ici, ce sont des fichiers à convertir.

Il s’agit maintenant de définir les paramètres de la vidéo. Par exemple, dans la colonne Paramètres, il est marqué Flash 8 Qualité moyenne. Moi, je préfère une bonne qualité.

Pour modifier ça, cliquez sur le nom du fichier à convertir, puis sur le bouton Paramètres qui se dégrise.

Dans la liste déroulante, choisissez une autre qualité d’encodage. Vous pouvez aussi jeter un coup d’œil aux Paramètres avancés. Mais il vaut mieux ne pas trop chipoter là-dedans, le résultat est bon sans rien changer.

Évidemment, si vous souhaitez redimensionner ou recadrer la vidéo, allez-y, ça ne changera rien à l’encodage.

Flash Video Encoder est plutôt performant, d’autant plus qu’il est normalement destiné aux professionnels de la vidéo.

Quand tout est bon, cliquez sur Activer la file d’attente. Flash Video Encoder va alors commencer la conversion.

Et puis c’est fini. Vous obtenez un beau fichier *.flv prêt à être utilisé.

P.S. — J’ai pris la première vidéo qui me tombait sous la main, c’est-à-dire le fichier démo de Windows Movie Maker 2.

Retour en haut

Convertir : avec WinFF et FFmpeg

Pour convertir facilement vos vidéos en *.flv, on va utiliser FFmpeg. FFmpeg est un ensemble de logiciels libres dédiés au traitement des vidéos. FFmpeg est disponible pour Windows, Mac OS et Linux. C’est malheureusement un logiciel en ligne de commande, mais WinFF est là ! WinFF est une interface graphique pour FFmpeg, qui est elle aussi disponible pour les différents systèmes d’exploitation !

Installation

Windows

Pour les utilisateurs de Windows, rendez-vous ici pour télécharger la version de WinFF pour Windows. L’installateur installera FFmpeg et WinFF et sera utilisable directement.

Linux

Pour les utilisateurs de Linux, installez WinFF via votre gestionnaire de paquets. Vous pouvez aussi télécharger les paquets directement, sur la page de téléchargement. Installer WinFF installera également FFmpeg s’il n’est pas déjà installé.

Utilisation

WinFF ressemble à beaucoup de convertisseurs : ajoutez les vidéos que vous souhaitez convertir, réglez quelques options, cliquez sur Convertir, et le tour est joué.

Saisissez Convertir en Websites, et ensuite saisissez le paramètre par défaut de votre choix.

Flash Video (flv) for Web use Fullscreen : la taille de la vidéo obtenue est de 320×240 pixels (proportion 4:3).
Flash Video (flv) for Web use Widescreen : la taille de la vidéo obtenue est de 320×180 pixels (proportion 16:9).

Autres réglages

Il est fort probable que ces deux réglages prédéfinis ne vous satisfassent pas (taille trop petite par exemple). Dans ce cas, il y a deux solutions : soit afficher des options supplémentaires, c’est rapide, soit créer un nouveau préréglage. C’est un rien plus long, mais vous pourrez le sauvegarder.

Options supplémentaires

Cliquez simplement sur le bouton Options pour afficher (ou masquer) les options supplémentaires. Vous pouvez alors régler rapidement le débit vidéo, la taille de la vidéo, ou les proportions (ratio d’aspect). Des options de recadrage peuvent être définies, et des paramètres additionnels peuvent être ajoutés (si vous vous y connaissez bien). Ces paramètres sont ceux utilisés par FFmpeg, reportez-vous à la documentation de FFmpeg pour plus d’informations :

Créer ou modifier un préréglage

Pour accéder au panneau de gestion des préréglages, allez dans Editer > Préréglages. Sélectionnez la catégorie Websites dans la liste de gauche. Vous pouvez alors éditer un des deux préréglages Flash Video.

Pour en créer un nouveau, modifiez simplement le Nom du préréglage, ainsi que son Titre complet.

Cliquez sur Ajouter / Modifier pour valider les modifications.

La ligne de commande du préréglage

Comme je l’ai dit plus haut, il s’agit des paramètres utilisés par FFmpeg pour convertir la vidéo. Inspirez-vous d’une ligne de commande existante pour créer la vôtre. Les paramètres de FFmpeg peuvent être consultés dans la documentation en anglais. Voici quelques paramètres utiles (tous les paramètres ne doivent pas être spécifiés en fait) :

<tableau>
<legende>Paramètres d’encodage</legende>
<ligne>
<entete>Param</entete>
<entete>Description</entete>
</ligne>
<ligne>
<cellule>-ar</cellule>
<cellule>Taux d’échantillonnage du son</cellule>
</ligne>
<ligne>
<cellule>-an</cellule>
<cellule>Pas de son (-ar est donc inutile)</cellule>
</ligne>
<ligne>
<cellule>-ab</cellule>
<cellule>Débit audio en bits/seconde</cellule>
</ligne>
<ligne>
<cellule>-f</cellule>
<cellule>Format de sortie</cellule>
</ligne>
<ligne>
<cellule>-s</cellule>
<cellule>Taille (Largeur x Hauteur)</cellule>
</ligne>
<ligne>
<cellule>-ss</cellule>
<cellule>Temps à partir duquel on commence à convertir : -ss 00:00:30 (à la 30^e seconde)</cellule>
</ligne>
<ligne>
<cellule>-t</cellule>
<cellule>durée à convertir : -t 00:01:30 (à 1 minute 30 secondes)</cellule>
</ligne>
</tableau>

Utiliser FFmpeg sans WinFF

Si vous tournez sous Windows, vous pouvez télécharger directement FFmpeg ici. C’est un fichier *.7z que vous pouvez ouvrir avec WinZip, WinRAR ou encore 7-Zip (gratuit et open source).

Du côté de Linux, FFmpeg est installable via le gestionnaire de paquets. Vous pouvez aussi utiliser directement la commande sudo apt-get install ffmpeg pour l’installer, par exemple.

La procédure d’utilisation est bien sûr la même quel que soit l’OS utilisé. Ouvrez votre console, et entrez :

Code : Console

ffmpeg -i video.wmv -ar 22050 -ab 32 -f flv -s 400x300 video.flv

Le paramètre -i indique le chemin de la vidéo à convertir, ici, video.wmv. Pour les autres paramètres, reportez-vous au tableau donné précédemment, ou à la documentation de FFmpeg.

Vous n’avez plus qu’à attendre que la conversion soit finie. Et attention, n’appuyez pas sur Q.

Retour en haut

Lire : avec Neolao FLV Player

Neolao FLV Player, ou de son vrai nom FLV Player, est une animation SWF toute faite qui vous permet de lire une vidéo FLV sur une page Web. FLV Player est développé par le français Neolao.

Le lecteur est disponible en plusieurs versions :

Mini, version minimaliste du lecteur, le plus léger ;
Normal, version de base ;
Maxi, version étendue du lecteur, avec plus d’options ;
Multi, variante de la version Maxi qui permet de lire plusieurs fichiers FLV.

Le Neolao FLV Player a comme principaux avantages d’être simple, et surtout d’avoir une documentation disponible en français, au contraire de l’excellent Flash Video Player.

Fichiers

Téléchargez le fichier *.swf qui correspond à la version que vous désirez utiliser, et uploadez-le sur votre site Web. Je vais utiliser le fichier player_flv.swf dans mon exemple ci-dessous.

Lecture de base

Pour lire une vidéo FLV, utilisez ce code HTML tout simple :

Code : HTML

<object type="application/x-shockwave-flash" data="player_flv.swf" width="400" height="300">
	<param name="movie" value="player_flv.swf" />
	<param name="allowFullScreen" value="true" />
	<param name="FlashVars" value="flv=votrefichierflv.flv" />
</object>

Test du code

Spécifiez le chemin vers votrefichierflv.flv dans le paramètre flv. Définissez aussi le chemin vers le fichier SWF (ici, player_flv.swf) dans l’attribut data de l’élément <object> et dans l’élément <param name="movie" />

Essayez de ne pas mettre d’URL absolue pour le FLV, sinon Flash demandera, lors du chargement de l’animation, s’il peut aller chercher le fichier, car il en déduit que le FLV se trouve sur un autre serveur, ce qui peut constituer une menace (c’est ce que Flash croit

Lecture de plusieurs fichiers

Pour lire plusieurs fichiers, vous devez utiliser la version Multi du player, c’est-à-dire le fichier player_flv.swf. Dans la variable flv, il vous suffit de mettre à la suite les différentes vidéos à lire en les séparant par le caractère pipe (|), comme le monde ce code :

Code : HTML

<object type="application/x-shockwave-flash" data="player_flv_multi.swf" width="200" height="150">
	<param name="movie" value="player_flv_multi.swf" />
	<param name="allowFullScreen" value="true" />
	<param name="FlashVars" value="flv=video1.flv|video2.flv|video3.flv" />
</object>

Test du code

Utilisation avancée et personnalisation

Comme dans les images données ci-dessus, il est possible de modifier les couleurs du lecteur et de le paramétrer, comme par exemple, de définir le temps de buffer (mémoire tampon), l’image par défaut, la taille de la playlist… Bref, il y a un certain nombre d’options.

Sur le site de l’auteur, pour chaque type de lecteur (Normal, Maxi, Multi…) un générateur de code est disponible (dans un lien du menu). Pour la version Maxi, il se trouve ici. Le générateur est assez simple à utiliser, il y a une prévisualisation du lecteur. Il vous suffit de copier-coller le code HTML proposé, et d’un peu l’adapter.

Retour en haut

[Annexe] Service après-vente

Je fais ici un petit récapitulatif des questions qui m’ont été posées dans les commentaires et via la messagerie privée.

Mes conseils

Vous pouvez sans problème utiliser une URL absolue pour afficher le lecteur FLVPlayer : http://www.monsite.free.fr/videos/flvplayer.swf. Ça vous évite de jouer avec des URL relatives.

Essayez aussi de ranger vos dossiers de façon simple. Évitez de faire des URL relatives compliquées.

Pensez aussi à ne jamais mettre d’espaces ou de caractères spéciaux dans vos URL et vos noms de fichiers !

Encodage

Riva et SUPER ne marchent pas, que faire ?

Il vous faut alors passer directement par FFmpeg. Reportez-vous à la partie Convertir : en console, avec FFmpeg.

Je suis sous Linux, et ni SUPER ni Riva ne fonctionnent sous mon OS. Que faire ?

Reportez-vous à ma réponse précédente. FFmpeg est disponible pour Linux. Voyez cette partie pour plus d’informations.

Comment convertir en étant sous Mac OS ?

Il existe un logiciel semblable à SUPER pour Mac exploitant ffmpeg. Il s’appelle ffmpegX. Mais vous pouvez passer directement par FFmpeg via la console. Reportez-vous à la partie Convertir : en console, avec FFmpeg.

Neolao FLV Player

La vidéo se lit correctement sous Internet Explorer mais pas sous les autres navigateurs (ou inversement).

C’est que l’URL du fichier player.swf n’est pas correctement définie dans la balise <object>. Il faut veiller à ce que l’URL définie dans l’attribut data de la balise <object> soit la même que celle définie dans la balise <param name="movie" /> :

Code : HTML

<object type="application/x-shockwave-flash" width="400" height="300" data="player_flv.swf">
	<param name="movie" value="player_flv.swf" />
	<param name="FlashVars" value="flv=votrefichierflv.flv" />
</object>

Par ailleurs, sous Internet Explorer, il faut définir une largeur et une hauteur au sein de la balise <object> : <object width="400" height="300" … >. Mais de manière générale, on procède comme ça tout le temps.

La vidéo se lit normalement, mais le curseur de lecture reste bloqué au début ! Que faire ?

Soit vous avez encodé votre vidéo avec une vieille version de SUPER, soit c’est un *.flv que vous avez récupéré (Youtube, par exemple) et qui est mal encodé. En réalité, il n’est pas mal encodé : il est encodé en FLV 1.0. Pour bénéficier du curseur de lecture, il faut passer votre vidéo au format FLV 1.1. Pour cela, c’est très simple, il suffit d’injecter des métadonnées…

Pour plus d’informations, reportez-vous à la partie Annexe : injecter des métadonnées.

Adobe/Macromedia Flash

Dans le lecteur créé avec Flash 8, est-il possible de remplacer le contentPath (c’est-à-dire le lien qui pointe vers mon contenu video.flv) par un lien qui pointe vers une playlist contenue dans un fichier *.xml comme indiqué pour la procédure avec la FLVPlayer ?

Non, ce n’est pas possible. Enfin si, c’est possible, mais il faut monter tout vous-même, à coups d’ActionScript, et ça, ça dépasse mon domaine de compétences.

Peut-on intégrer le FLVPlayer directement dans une animation Flash ?

Non, il vaut mieux le faire soi-même en ActionScript. Je vous recommande la lecture de ce tutoriel pour y parvenir.

Retour en haut

[Annexe] Injecter des métadonnées

Pour injecter des métadonnées dans notre *.flv, nous allons utiliser le programme répondant au nom charmant de FLV MetaData Injector, un petit logiciel gratuit.

Téléchargement :

Page des auteurs
Liens directs :
- flvmdi.exe
- Interface GUI

Vous devez télécharger FLVMDI 2.94 et FLVMDIGUI 1.05. Décompressez les 2 archives dans le même dossier !

Une fois que c’est fait, ouvrez flvmdigui.exe.

Dans le champ Input FLV file, recherchez le fichier *.flv que vous avez créé avec SUPER. Cochez les options, sauf Create XML file et Extract MetaData as XML(s), no injection.

Dès que c’est fait, cliquez sur Run FLVMDI, et le tour est joué.

Retour en haut

Voilà, faites de belles vidéos ! Image utilisateur

Retour en haut

Retour en haut

209 commentaires pour "Des vidéos FLV sur son site Web"

Note moyenne : 3.44 / 4 (16 votes)

Pseudo	Commentaire
webolearning	# Posté le 06/01/2011 à 16:51:13
	Bonsoir à tous, j'ai un petit souci avec ma vidéo. En fait j'apprends à créer des sites web , et j'ai intégré une vidéo à mon site à partir du tuto du site du zéro, mais cette vidéo s'affiche avec Firefox et pas avec explorer.Je suis bien embêté alors je sollicite votre aide vu que je veux mettre le site en ligne ce week-end. Voici le code qui affiche la vidéo: <object data="animation.swf" type="SteelExternalAll.swf" width="420" height="413"> <param name="play" value="true" /> <param name="loop" value="false" /> <param name="movie" value="SteelExternalAll.swf" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="scalemode" value="noborder" /> <param name="wmode" value="transparent" /> </object> Le code marche impec avec Firefox mais pas avec explorer, aidez-moi svp.
Thomas Battistetti	# Posté le 11/01/2011 à 17:37:09
	Bonsoir tout le monde. J'ai un léger problème assez dérangeant : quand je lance mon site, les vidéos se lancent automatiquement. Pour ceux qui ont la solution, merci d'avance Portofolio : The 3D FX-studio Graphiste pour Antalogame
Leo79	# Posté le 22/01/2011 à 15:16:45
	J'ai un proiblème asser bizarre. Je pense avoir adobe flash player 10 mais je n'arrive pas a le lancer pour faire le tuto. Aider moi svp :).
trais_rond	# Posté le 23/05/2011 à 15:39:49
the cake is a lie Ville : Loos Pays : France métropolitaine	ça peut sembler bizarre mais je n'arrive pas à télécharger player_flv.swf, quand je clique sur le liens, je tombe sur ça: et il ne se passe rien . www.TraisRond.com
Angua Von Uberwald	# Posté le 15/09/2011 à 19:18:19
	Bonjour! Alors moi j'ai un gros soucis, je m'arrache les cheveux, c'est terrible! J'ai intégré mes vidéos à partir de Dreamweaver, toutes marchent bien... toutes? non!!!! sauf une bien sûr! celle la présente un gros décalage entre le son et l'image qui sont pourtant synchronisées lorsque je lance le fichier .flv seul.... j'ai essayé de la réintégrer sans résultat.... si vous avez la solution merci de me le dire!