Des vidéos FLV sur son site Web

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



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.



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 .



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 .

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

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

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

Code : HTML - Lecture Flash

• Petit aperçu de mon animation

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.






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é de codage. Vous pouvez aussi jeter un coup d'oeil 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 :



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

Pour convertir facilement 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'oeil à 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).



Une boite de dialogue vous demandera de choisir entre le format SWF et le format FLV. Choisissez bien entendu le format FLV. La progression de l'encodage s'affiche alors au dessus de la liste des fichiers. 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é.

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.

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

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

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 30iè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 .

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.

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

• player.swf (se trouve dans l'archive)

Code à insérer

Code : HTML - FLV MediaPlayer

• Test du code

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

• 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

• Test du code

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 ?

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.

Encodage

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



Reportez-vous à ma réponse ci-dessus. ffmpeg est disponible pour Linux. Voyez cette partie pour plus d'informations.



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 .

FLV MediaPLayer

C'est que l'url du fichier player.swf n'est pas correctement défini 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 <params name="movie" /> :

Code : HTML



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 .

Il est dans le fichier .zip du FLV MediaPlayer, que vous avez téléchargé, ici.



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



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.



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

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 .



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

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