Les lecteurs de vidéo en flash comme sur Youtube ou DailyMotion sont de plus en plus présents sur les sites web.
Dans ce tutorial nous allons utiliser le lecteur FLV de Jeroen Wijering .
Pour commencer vous devez tous d’abord télécharger le zip contenant tous les fichiers ici
- Dezippez le contenu
- Renommer le dossier en lecteur_flash
- Créer ensuite un nouveau fichier HTML
- Placer le à la racine de votre serveur
- Mettez y dedans le code qui suis
- Creer deux repertoires à la racine : videos et preview
- Glissez y les deux fichiers qui se trouvent dans le zip :video.flv et preview.jpg
- Ensuite testez votre fichier si vous utilisez Firefox et que l’animation ne se charge pas essayez avec IETab
-
-
<!– Inclusion du script du lecteur –>
-
<script src="lecteur_flash/swfobject.js" type="text/javascript"></script>
-
<p id="player"><a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&Lang=French">Vous n‘avez pas flash player, cliquez ici pour le télécharger !</a></p>
-
<script type="text/javascript">
-
var s1 = new SWFObject("lecteur_flash/flvplayer.swf","single","300","170","7");
-
// Autorise ou pas l’affichage pleine ecran
-
s1.addParam("allowfullscreen","true");
-
//L’emplacement de notre fichier
-
s1.addVariable("file","videos/video.flv");
-
//L’emplacement du fichier de pré visualisation
-
s1.addVariable("image","preview/preview.jpg");
-
// La taille
-
s1.addVariable("width","300");
-
// La hauteur
-
s1.addVariable("height","170");
-
// Uniquement pour une image voir sur wikipedia la définition s1.addVariable("kenburns","false");
-
// Pour afficher le player dans la div avec l’id nommé "player"
-
s1.write("player");
-
</script>
Ceci était un exemple de lecteur vidéo de type FLV
Maintenant passons à la lecture d’un fichier MP3 avec l’album en previsualisation
-
-
<script type="text/javascript">
-
var s1 = new SWFObject("lecteur_flash/flvplayer.swf","single","300","170","7");
-
// L’emplacement de notre fichier vous n’avez rien à modifier dans les types tous est détecté automatiquement
-
s1.addVariable("file","musique/Avril Lavigne - Girlfriend.mp3");
-
// L’emplacement du fichier de pré visualisation ici la pochette du single
-
s1.addVariable("image","preview/Avril Lavigne - Girlfriend.jpg");
-
s1.addVariable("width","300");
-
s1.addVariable("height","170");
-
// Pour afficher le player dans la div avec l’id nomme player
-
s1.write("player");
-
</script>
Il existe aussi une possibilité de créer une playlist .
Vous pouvez aussi afficher d’autre type de fichiers comme des jpg,swf,png ou encore gif
Sympa, par contre ton (p id=”player”) n’est pas fermé,
et il faut savoir qu’un des avantages d’swfobject est qu’on peut mettre un contenu alternatif à l’animation flash.
(p id=”player”)Vidéo de ma souris dans mon séche linge(/p)