L’insertion d’une vidéo dans une page internet pose souvent problème et soulève de nombreuses questions sur les logiciels à utiliser, la procédure à suivre, les formats, etc. C’est pourquoi nous allons vous présenter une méthode que nous espérons assez simple d’accès pour atteindre cet objectif. Avant tout sachez qu’il n’y a pas qu’une méthode d’insertion web d’une vidéo, les logiciels sont nombreux, aussi bien gratuits que payants, tout autant que les procédés. Afin de limiter volontairement les alternatives et ne pas vous noyer sous l’information nous vous présentons une méthode gratuite aux choix limités, mais avec un résultat tout-à-fait satisfaisant en terme de qualité, de poids de fichier et de fluidité de visionnage.

ETAPE 1 - Création des dossiers de travail

Sur un système d’exploitation Windows vous disposez de bibliothèques, parmi lesquelles une nommée vidéos, dans laquelle nous stockerons nos fichiers sources dans un répertoire nommé “sources” et par la suite nos films montés dans un répertoire “films”. Un troisième répertoire que nous nommerons “web” servira à enregistrer les vidéos converties au format de publication web. En ouvrant votre bibliothèque vidéos vous devriez voir ceci :

[1]

 

ETAPE 2 - Récupération des fichiers sources

Une des premières choses à faire consistera à enregistrer dans le dossier “sources” de la bibliothèque “Vidéos” vos fichiers bruts directement issus de l’appareil de prise de vues.

 

ETAPE 3 - Téléchargement et installation des logiciels

Ensuite selon votre version de Windows vous devez disposer du logiciel Microsoft gratuit “Windows Movie Maker” ou “Windows Live Movie Maker“. S’il n’est pas déjà présent sur votre ordinateur installez ce logiciel, il vous servira à effectuer le montage vidéo de vos fichiers sources, vous pouvez le télécharger ici :

• Windows XP : inclus depuis le “Service Pack 2″ en version 2.1 –> [2] Téléchargement du SP3
• Windows Vista : version 2.6 –> [3] Téléchargement de Windows Movie Maker 2.6
• Windows 7 : Version Windows Live –> [4] Téléchargement de Windows Live Movie Maker

Un second logiciel devra être installé pour effectuer la conversion de format du fichier vidéo qui sera produit par Windows (Live) Movie Maker : “Free Video to Flash Converter“, c’est un logiciel gratuit (freeware), francisé, que vous pouvez télécharger sur le site de DVDVideoSoft :

• [5] Téléchargement de Free Video to Flash Converter

Vous pouvez consulter le [6] guide d’utilisation complet en français de Free Video to Flash Converter en cliquant ici.

Pour transférer le fichier final et le lecteur sur le serveur web vous aurez besoin d’un logiciel FTP. Si vous utilisez le navigateur Firefox il suffit d’installer le module complémentaire “FireFTP” pour disposer d’un client FTP efficace et gratuit. Sinon vous pouvez télécharger et installer “FileZilla” (libre, efficace et gratuit également) :

• [7] Installation du module FireFTP dans Firefox
• ou [8] Téléchargement de FileZilla

Vous trouverez documentation et tutoriels en français pour FileZilla sur le site [9] FileZilla.fr.

 

ETAPE 4 - Transfert des sources vidéos dans le logiciel de montage vidéo

Ouvrez côte à côte Windows (Live) Movie Maker et le Gestionnaire de fichiers de Windows sur votre bibliothèque Vidéos / sources puis faites glisser et déposez dans l’ordre de montage souhaité les sources à utiliser pour un projet, comme ceci :

 

 

A partir de maintenant n’oubliez pas d’enregistrer régulièrement votre projet…!

 

ETAPE 5 - Découpage du film

Pour monter rapidement un film commencez par supprimer des sources les parties inutiles en fractionnant et en rognant les séquences avec le menu “Edition” des “Outils Vidéo” :

 

Pour séparer des séquences positionnez-vous à l’emplacement voulu (repéré par une barre verticale noire) dans la source et cliquez sur “Fractionner” ; pour supprimer une partie de la source positionnez-vous dans la source au début de la séquence à supprimer et cliquez sur “Définir le point de début” de l’outil “Rogner“, puis positionnez-vous à la fin de la séquence à supprimer et cliquez sur “Définir le point de fin“.

Une fois les séquences superflues ôtées cliquez dans le menu “Accueil” sur “AutoMontage” :

 

cela aura pour effet d’ajouter automatiquement sur vos séquences :

• un titre
• un fondu de transition entre les séquences
• un générique

au passage vous pouvez même insérer une musique de fonds à votre vidéo.

 

ETAPE 6 - Titre et générique

Positionnez-vous ensuite dans le titre et dans le générique et ajoutez-y le texte souhaité. Vous pouvez choisir la couleur de fond, la police de caractères (typo, taille, couleur, alignement) et le mode d’apparition du texte dans l’écran :

 

Sauvegardez votre projet une dernière fois avant de passer à la création du film.

 

ETAPE 7 - Création du film

Dans l’onglet “Accueil” vous trouverez à droite un menu déroulant proposant différentes résolutions pour créer le film définitif. Déroulez-le et choisissez la résolution moyenne 720p en cliquant sur l’écran correspondant :

 

Après avoir cliqué sur l’écran une fenêtre s’ouvre pour nommer et enregistrer le film, enregistrez-le dans le dossier “films” de la bibliothèque “Vidéos” créée à l’étape 1. Un nouvelle fenêtre avec un curseur d’avancement s’ouvre alors pour vous informer de la progression de l’enregistrement du film :

 

 

ETAPE 8 - Conversion du film au format web

Pour convertir le film créé dans un format web léger et fluide on utilise Free Video to Flash Converter qui va transformer le format “Windows Media” en format “flv“. Il faut donc lancer ce programme puis sélectionner le fichier d’entrée (le film à convertir) dans le premier cadre en cliquant sur le bouton “Parcourir…“. Ensuite, dans le cadre suivant, vous choisissez le dossier de sortie “Bibliothèque / Vidéos / web” avec le bouton “Parcourir…” situé sous ce cadre. Vous pouvez également intervenir sur le nom du fichier et le disque de destination avec les boutons “Nom de sortie…” et “Lecteur…“.

 

Reste à fixer le format final du film pour le web, les  propositions par défaut “FLV” et “High Quality” sont généralement suffisantes mais vous pouvez toujours les changer avec le bouton “Modifier…” ; pour lancer le processus de conversion il suffit de cliquer le bouton “Convertir“. Cochez la case “Afficher un fichier HTML d’exemple après la conversion” afin de disposer de l’aide et du code pour l’installation sur le site web. Une fenêtre de progression de la conversion s’ouvre jusqu’à la fin du processus pour vous informer sur l’avancement.

Une fois la conversion terminée vérifiez que vous disposez bien dans le dossier “Bibliothèque / Vidéos / web” des fichiers suivants :

• “MonFilm.flv” (où “MonFilm” est le nom que vous avez donné à votre fichier final)
• “style.css“
• “HowToUseFlash_Example.htm“

A ce stade vous pouvez comparer la taille du fichier vidéo de votre film généré par Windows (Live) Movie Maker et celle du film converti par Free Video to Flash Converter ; vous observerez une diminution très importante de la taille du fichier vidéo, par exemple 15 Mo après conversion contre 100 Mo avant pour un film monté de 2′30, soit 85% de moins ! C’est autant de gagné en espace disque et en fluidité de lecture pour une qualité préservée.

 

ETAPE 9 - Transfert des fichiers sur le site Web

Maintenant que nous disposons d’un film de taille réduite il est temps de l’installer dans le site web. Pour ce faire il faut d’abord transférer les 2 fichiers MonFilm.flv et style.css sur le serveur web avec le logiciel FTP.

Lancez le programme FileZilla (ou utilisez FireFTP de Firefox) et connectez-vous sur votre hébergement web avec :

• l’adresse de l’hôte (serveur web),
• votre identifiant (login)
• votre mot de passe

(que vous aurez préalablement configurés et récupérés dans l’espace d’administration de votre hébergement) comme ceci :

 

Une fois la connexion au serveur effectuée transférez les 2 fichiers dans le même répertoire que celui de la page web dans laquelle vous voulez afficher votre vidéo. Si la taille du fichier vidéo (flv) fait plusieurs dizaines de Mo il est normal que cela prenne du temps.

Ajoutez ensuite le code donné par le fichier “HowToUseFlash_Example.htm” dans la page web exactement à l’endroit où vous désirez afficher la vidéo, soit par insertion dans le code HTML de la page, soit par insertion de code via le CMS si vous en utilisez un. Dans le premier cas transférez également cette page modifiée sur le serveur via FTP.

Il ne vous reste plus qu’à fermer votre connexion FTP puis à visiter votre page pour regarder votre vidéo !

Informations complémentaires :
- Quels que soient les formats et pré-définitions choisis lors de la conversion de votre film dans Free Video to Flash Converter affichez toujours le fichier HTML d’exemple et suivez bien les instructions qu’il contient car l’intégration dans le site web peut être légèrement différente de celle indiquée dans ce tutoriel selon les options choisies.

- Si vous voulez classer dans un répertoire spécifique de votre serveur web les vidéos à afficher dans vos pages prenez bien soin d’ajouter le préfixe “répertoire/” (par exemple) devant le nom des fichiers dans les chemins du code à intégrer.