Aller au menu - Aller au contenu

Icône Des vidéos FLV sur son site Web

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 :Si vous n’avez pas Flash, lisez :
Si vous rencontrez des problèmes avec le tutoriel, lisez :

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 ?


FlashPlayer
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. ;)

FLV, SWF avec Flash

Image utilisateur
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 ;) ).

Image utilisateur


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.

Image utilisateur


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. :D

Image utilisateur


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 :

Image utilisateur


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 :

Image utilisateur


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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<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>


Convertir : avec Flash Video Encoder

Image utilisateur
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. ^^

Image utilisateur


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.

Image utilisateur


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

Image utilisateur


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

Image utilisateur


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. :D

Convertir : avec WinFF et FFmpeg

Image utilisateur
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é.

Image utilisateur


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 :

Image utilisateur


Créer ou modifier un préréglage



Image utilisateur
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 30e 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.


Image utilisateur


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

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.


Image utilisateur


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
1
2
3
4
5
<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>


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
1
2
3
4
5
<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>


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.

Image utilisateur

[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
1
2
3
4
<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…


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.

[Annexe] Injecter des métadonnées

Image utilisateur
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 :


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.

Image utilisateur


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

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

Partager

209 commentaires pour "Des vidéos FLV sur son site Web"
Note moyenne : 3.44 / 4 (16 votes)
Pseudo Commentaire
Hors ligne webolearning # Posté le 06/01/2011 à 16:51:13

:euh:
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.
Hors ligne Thomas Battistetti # Posté le 11/01/2011 à 17:37:09
Avatar

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
 
Hors ligne 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 :).
Hors ligne trais_rond # Posté le 23/05/2011 à 15:39:49
the cake is a lie
Avatar

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:Image utilisateur

et il ne se passe rien :euh: .
 
Hors ligne 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!

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.