[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Lecture du tutoriel

Des vidéos FLV sur son site Web

	Auteur : Thunderseb Créé : le 31/05/2006 17:09:58 Modifié : le 05/06/2008 21:18:56 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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 (FlashVideo) est un format vidéo de type streaming (qui se lit au fur et à mesure du chargement). Le FLV est propriétaire d'Adobe (Macromedia à l'origine).

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

Citation : Si vous possédez Flash (version 8 ou CS3), lisez :

Citation : Si vous n’avez pas Flash, lisez :

Convertir : Avec SUPER et Riva
Convertir : En console, avec ffmpeg (seulement si vous êtes sous Linux ou que vous aimez la console)
Lire avec FLV MediaPlayer

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

Annexe : Service après vente

Sommaire du chapitre :

Payant ou pas ?
FLV, SWF avec Flash
Convertir : avec Flash Video Encoder
Convertir : avec SUPER et Riva
Convertir : en console, avec ffmpeg
Lire avec FLV MediaPlayer
[Annexe] Service après vente
[Annexe] Injecter des métadonnées

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 en .flv gratuits 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 pour pouvoir lire la vidéo comme avec un lecteur normal (avec les options "lire", "pause", "volume" etc.). Le SWF est lisible avec FlashPlayer, qui est disponible pour Windows, Mac et Linux. Bref, partout, au contraire des autres formats vidéo. Et puis, FlashPlayer est disponible d'origine dans Internet Explorer, les gens 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 GoogleVideo, Dailymotion, ou encore YouTube

FLV, SWF avec Flash

Flash 8 et Flash CS3 permettent de créer très facilement des lectures 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 qu'il est ouvert, 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 FlashPlayer 8. Vous pouvez mettre en qualité moyenne, pour 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 en plus

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 accéder à ces paramètres, cliquez sur le composant FLV. Ensuite, ouvrez le panneau Propriétés (Ctrl + F3) et allez sous 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 placer le paramètre skinAutoHide en position false. Ainsi, le contrôleur de lecteur ne sera 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 + Enter).

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 lecteur 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 l'url dans le paramètre skin du composant (voyez la sous-section juste ici au 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

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

http://www.siteduzero.com/uploads/fr/f [...] 000/12541.gif

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é de codage. Vous pouvez aussi jeter un coup d??il aux Paramètres avancés. Mais il vaut mieux ne pas trop chipoter la dedans, le résultat est bon sans rien changer

. Evidemment, 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 dédié 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 :

http://www.siteduzero.com/uploads/fr/f [...] 000/12544.gif

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

PS : j'ai pris la première vidéo qui me tombait sous la main, c'est-à-dire le fichier démo de MovieMaker 2

Convertir : avec SUPER et Riva

Pour convertir vos vidéos en .flv, il existe deux logiciels gratuits.

Riva FLV Encoder

C'est un logiciel gratuit qui permet de convertir des vidéos en fichiers .flv. Je ne vais pas vous en parler, pour la simple et bonne raison que chez moi, il ne convertit rien. J'ai toujours une erreur. Mais chez SuprazZz, ça a l'air de bien marcher, donc, je vous invite à aller jeter un coup d'?il à son big-tuto sur ActionScript, et plus particulièrement à la partie dédiée au FLV et à Riva, exactement ici.

SUPER

J'ai trouvé le logiciel SUPER par hasard, alors que je lisais des news sur un site de news (logique

). Il est gratuit et est un convertisseur universel, qui permet de convertir quasiment tous les formats. Pas seulement en .flv.

Allez télécharger SUPER ici, sur Clubic (c'est le site de news dont je parlais

).

Une fois que c'est fait, installez-le puis ouvrez-le. Voici les informations les plus importantes :

Pour convertir un fichier, ouvrez votre Explorateur Windows et recherchez le fichier à convertir. Quand vous l'avez trouvé, vous cliquez dessus. Maintenez le clic de la souris enfoncé et faites un glisser-déplacer dans cette zone de l?interface :

Voici ce que vous devriez obtenir :

Maintenant, cliquez sur le bouton Encode (active Job-List Files).

Dans la boîte de dialogue, activez l'option FLV (et non SWF) :

Vous attendez un petit peu, et dès que la case à cocher du nom du fichier se décoche, c'est bon

.

Allez chercher votre fichier .flv qui se trouve dans le dossier Output où SUPER est installé.

Petit truc : pour modifier le dossier de sortie, cliquez droit sur l'interface, puis cliquez sur Specify The Output Folder Destination

Convertir : en console, avec ffmpeg

Cette petite partie est dédiée aux amateurs de la console, et à ceux qui ne peuvent pas faire autrement, comme les linuxiens

. En effet, il n'existe pas de joli petit soft pour convertir vos vidéos en .flv sous Linux. Mais il en existe un qui ne fonctionne qu'en console.

Ce petit soft répond au doux et poétique nom de ffmpeg. ffmpeg est en fait un ensemble de logiciels qui permettent le traitement de flux numériques. Et devinez quoi, SUPER utilise en réalité ffmpeg, pour nous Windowsiens qui n'aimons pas trop la console. ffmpeg est Open Source et est disponible pour linux.

ffmpeg est aussi utilisé, avec PHP, sur les serveurs, pour convertir les vidéos envoyées.

Windows

Si vous tournez sous Windows, vous pouvez télécharger ffmpeg ici. C'est un fichier .7z que vous pouvez ouvrir avec WinZip ou WinRar.

Ubuntu

Il vous suffit d'installer directement le paquet ffmpeg :

Code : Console

sudo apt-get install ffmpeg

Utilisation

La procédure d'utilisation est bien sûr la même quelque 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

Voici la liste de quelques paramètres :

Paramètres d'encodage
Param	Description
-i	Fichier à convertir
-ar	Taux d'échantillonage du son
-an	Pas de son (-ar est donc inutile)
-ab	Audio bitrate en kbit / seconde
-f	Format de sortie
-s	Taille (Largeur x Hauteur)
-ss	Temps à partir duquel on commence à convertir : -ss 00:00:30 (à la 30^ième seconde
-t	durée à convertir : -ss 00:01:30 (à la 1 minute 30 secondes)

Vous n'avez plus qu'a attendre que la conversion soit finie. Et attention, n'appuyez pas sur q

Lire avec FLV MediaPlayer

FLV MediaPlayer est une animation SWF toute faite qui vous permet de placer une lecture FLV sur votre site sans devoir posséder le logiciel Flash. Pour ceux qui connaissent, c'est un peu comme DewPlayer, qui est un lecteur de .mp3. FLV MediaPlayer est un lecteur de .flv.

Le site du créateur ce Player se trouve ici.
Je vous invite à télécharger la dernière version du lecteur ici. Si le lien n'existe plus ou l'archive est endommagée, vous pouvez télécharger la version sur mon FTP.

Avant, ce lecteur s'appelait juste FLVPlayer. Dans sa dernière version, il est capable non seulement de lire des vidéos FLV, mais aussi des fichiers MP3.

Utilisation simple

Pour utiliser le FLV MediaPlayer en toute simplicité, c'est-à-dire une vidéo et une simple page HTML, voici la démarche.

A placer sur le FTP

mediaplayer.swf (se trouve dans l'archive)

Code à insérer

Code : HTML - FLV MediaPlayer

<object type="application/x-shockwave-flash" width="400" height="220" data="mediaplayer.swf">
	<param name="movie" value="mediaplayer.swf" />
	<param name="flashvars" value="file=votrefichierflv.flv" />
</object>

Test du code

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

Utilisation de la playlist

Vous pouvez aussi afficher plusieurs vidéos à l'aide d'une playlist. Pour cela, il suffit de remplacer votrefichierflv.flv par votrefichierxml.xml (ici, playlist.xml) qui contiendra les paramètres pour charger les vidéos. Image utilisateur

Exemple.

A placer sur le FTP

mediaplayer.swf (se trouve dans l'archive)
playlist.xml (vous devez le créer)

Le fichier playlist

FLV MediaPlayer supporte le format XSPF pour créer des playlists. En fait, c'est juste du XML, mais des gens se sont mis d'accord pour utiliser les mêmes noms de balises. Voici un exemple :

Code : XML - playlist.xml

<playlist version="1" xmlns="http://xspf.org/ns/0/">
	<trackList>

		<track>
			<title>So Cold</title>
			<creator>Machinima</creator>
			<location>socold.flv</location>
		</track>

		<track>
			<title>Team Fortress 2</title>
			<creator>Valve</creator>
			<location>tf.flv</location>
		</track>

	</trackList>
</playlist>

Voir le fichier

Chaque bloc <track> symbolise un fichier, et contient 3 éléments enfants :

<title> : le titre qui apparait dans le lecteur
<creator> : l'auteur du fichier
<location> : l'url du fichier

Il existe aussi l'élément <image > qui permet de spécifier l'url d'un petite image à afficher.

Donc pour ajouter une nouvelle vidéo à lire, créez un <track> et définissez ses éléments enfants comme vous le voulez

Code pour insérer le lecteur

C'est facile, reprenez le code que j'ai donné précédemennt, et remplacez l'url votrevideo.flv par l'url de votre fichier playlist :

Code : HTML

<object type="application/x-shockwave-flash" width="400" height="400" data="data/mediaplayer.swf">
	<param name="movie" value="data/mediaplayer.swf" />
	<param name="flashvars" value="file=data/playlist.xml&displayheight=300" />
</object>

Test du code

Attention, pour afficher la liste des vidéos, il convient d'ajouter cette variable : displayheight=xxx (xxx est un nombre en pixels). C'est en fait la hauteur de la vidéo. Toute l'animation prendra la taille spécifiée dans le height. Mais vous devez en plus spécifier la hauteur de la vidéo (qui doit obligatoirement être plus petite que la height). Le bloc contenant la liste de lecture prendra la place restante dans l'animation.

Voilà, vous avez même compris où se placent les variables

. Sachez que vous pouvez en mettre plusieurs, toujours séparées par le signe &. Un lien vers une page contenant la liste des variables est disponible dans le fichier README.html, inclus dans l'archive. De mon côté, j'avais traduit la liste des variables de la version 3.1 du MediaPlayer, et je vous la donne ici.

Ah oui, au fait ! FLV MediaPlayer n'est pas le seul, mais c'est le plus simple, léger et pas trop laid. C'est pour cela que je vous en ai parlé

. En voici d'autres :

Maxi Player, en français, et libre. Je vous le recommande aussi .
Un beau, payant, mais est-ce vraiment utile ?

[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 MP.

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 dossier de façon simple. Evitez de faire des URL relatives compliquées.

Pensez aussi à ne jamais mettre ni d'espaces ni de caractères spéciaux dans vos URLs et vos noms de fichier !

Encodage

Riva et SUPER ne marchent pas, que faire ?

Il vous faut alors passer directement par ffmepg. 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 ci-dessus. ffmpeg est disponible pour Linux. Voyez cette partie pour plus d'informations.

Comment convertir en étant sous MacOS ?

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

FLVPLayer

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 .

Mais où se trouvent les fichiers flvplayer.swf et ufo.js ?

Ils sont dans le fichier .zip du FLVPlayer, que vous avez téléchargé, ici.

Dois-je mettre tout le contenu du .zip sur mon FTP ?

Bien sûr que non. Ne vous occupez pas des dossiers extras, source et readme. Cela dit, le lecture du readme peut être intéressante

Pour la playlist, est-il possible de la placer ailleurs que sous le lecteur ? À côté par exemple ?

Non, on ne sait pas changer l'emplacement de la playlist facilement. Pour le faire, il faut modifier le fichier flvplayer.swf (récupérer la source en .fla) et modifier à l'aide de Macromedia/Adobe Flash.

Puis-je modifier le skin de FLVPLayer ?

Pas simplement. Il faut éditer le fichier .fla avec Flash. Mais il existe un autre lecteur, Maxi, qui comporte de nombreux paramètres de personnalisation, en français

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 tuto pour y arriver.

[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.