Vidéos flv

Constat
TaKa FLV Encoder
L’image de présentation
Préparer sa page web & son site
Résultat

Constat

Pour qu’une page web soit plaisante à consulter, on doit y trouver du texte, des tableaux, de la couleur, des images et... des vidéos. Mais des formats vidéos, il en existe plein : avi, rm, mov, mpg, mp4, vob, asf, wmv, 3gp, div... enfin de quoi s’arracher les cheveux.

Autre problème, votre vidéo ne doit pas être trop grosse à charger ou à télécharger, faute de quoi les visiteurs de votre site ne reviendront pas. Tout cela pour arriver au format vidéo, à mon avis, number one sur internet : le format flv (FLash Video).

TaKa FLV Encoder

De nombreux logiciels permettent de réencoder en flv... Celui qui actuellement a ma préférence est TaKa FLV Encoder :

Pour les règlages, c’est à chacun de voir ce qui lui convient le plus. Par la suite, cette vidéo sera nommée “video1.flv”.

L’image de présentation

Il y a un autre avantage à ce type de vidéos, c’est qu’elle ne se charge pas automatiquement à l’ouverture de la page web et donc ne ralenti pas la navigation. En contrepartie, il faut alors prévoir une image de présentation qui se placera dans la fenêtre vidéo.

L’idéal est d’avoir une image qui a les même dimensions que la vidéo (ici 320´240) et de la nommer “video1.preview.jpg”, ce qui est assez facile à faire avec paint :

Préparer sa page web & son site

Pour afficher la vidéo, il faut cinq fichiers :

– la vidéo (ici video1.flv) ;

– l’image de présentation (ici video1.preview.jpg) ;

– les deux fichiers swfobject.js et player.swf qui gèrent l’affichage de la vidéo ;

– la page web dans laquelle il faut ajouter les lignes de codes suivantes :

<id='preview1'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
   var s1 = new SWFObject('player.swf','player','320','260','9');
   s1.addParam('allowfullscreen','true');
   s1.addParam('allowscriptaccess','always');
   s1.addParam('flashvars','file=video1.flv&image=video1.preview.jpg');
   s1.write('preview1');
</script>

Résultat

Si tout ce passe bien, voici ce que cela donne :

The player will show in this paragraph

The player will show in this paragraph

The player will show in this paragraph

The player will show in this paragraph