RevoluGame | Intégrer un lecteur flash dans son site

Accueil » Tutoriaux » HTML » Intégrer un lecteur flash dans son site

Comment intégrer un lecteur flash dans son site

Suite à un besoin de ma part, j'ai cherché comment intégrer un lecteur flash sur un site. Mais je me suis confronté à un problème de compatibilité. En effet, notre cher amis Internet Explorer ne voulait même pas afficher le player. Donc après beaucoup de recherche, j'en ai trouvé un compatible et assez simple à installer.

Ce tuto est extrait du site jeroenwijering.com. Ce site étant en anglais, je me suis dis qu'un tuto serait le bienvenue.

Tout d'abord, télécharger le player.

Télécharger

Le dossier contient un fichier d'explication mais en anglais. Les deux seuls fichiers utiles sont le player (flvplayer.swf) et les paramètres (swfobject.js).

1. L'installation

Vous devez insérer dans vos balises <head></head> l'appel du javascript :

Ce script permet de configurer le lecteur. Mais nous n'entrerons pas dans les détails.
Dans votre page html, à l'endroit que vous souhaitez, placez le code suivant :

// permet de télécharger le plug-in si l'utilisateur ne le possède pas
<p id="player">
    <a href="http://www.macromedia.com/go/getflashplayer">Téléchargez Flash</a> pour voir le lecteur.
</p>
<script type="text/javascript">
    // permet de déterminer l'emplacement de fichier swf et la taille qu'il doit prendre à l'écran
    var so = new SWFObject('flvplayer.swf','player','400','400','7');
    so.addParam("allowfullscreen","true"); // permet d'utiliser le mode plein écran
    so.addVariable("file","video.flv"); // détermine l'emplacement de la vidéo à jouer
    so.addVariable("displayheight","300"); // détermine la taille de l'affichage de la vidéo
    so.write('player');
</script>

Par contre si vous ne pouvez pas utiliser le javascript sur votre page, insérez seulement le code suivant :

2. Les paramètres

Voici les différentes variables pouvant être intégrer au player si vous utilisez la méthode par le javascript :

Variables de base :

displayheight (valeur numérique) : Variable qui permet de déterminer la hauteur de la vidéo. Par défaut la taille correspond à la taille minimal de la barre de contrôle (20 px).
file (url) : Détermine l'emplacement de la vidéo à jouer. Le fichier peut-être au format mp3, flv, rtmp, jpg, swf, png, gif. Vous pouvez aussi jouer une playlist (voir plus bas).
height (valeur numérique) : Détermine la hauteur du lecteur (quelques problèmes de compatibilité, laissez la valeur par défaut pour éviter les problèmes)
width (valeur numérique) : Détermine la largeur du lecteur (Idem que pour la hauteur).
image (url) : Si vous jouez un fichier mp3 ou flv, vous pouvez utiliser cette variable pour afficher une image d'apperçu. Elle peut être au format jpg, swf, png, gif.
shownavigation (true,false) : Permet d'activer ou de désactiver la barre de navigation.
transition (fade,bgfade,blocks,bubbles,circles,fluids,lines,random,slowfade) : Détermine la transition entre les image. Par défaut, la valeur est fade.

Variables de couleur :

backcolor (couleur) : Détermine la couleur de l'arrière plan du lecteur.
frontcolor (couleur) : Détermine la couleur du texte et des boutons.
lightcolor (couleur) : Détermine la couleur

Par défaut, les couleurs sont noir (0x000000) et blanc (0xFFFFFF).

Variables d'apparence :

autoscroll (true,false) : Par défaut, la zone de la liste de lecture peut avoir une barre de défilement si le nombre d'item est trop long. Si vous mettez la variable à vrai (true), la barre de défilement disparaitrat et la liste de lecture défilera automatiquement, selon la position de la souris.
displaywidth (nombre de pixels) : Comme 'displayheight', vous pouvez modifier cette variable pour changer la largeur du lecteur pour pouvoir afficher la liste de lecture sur la droite.
kenburns (true,false) : Cela permet d'activer l'effet Ken Burn. La meilleure utilisation de cet effet est sur des images larges.
largecontrols (true,false) : Permet de grossir la barre de contrôle. Cet effet est surtout utilisé pour les personnes ayant une vue altérée.
logo (url): Utilisez cette variable pour afficher un logo dans le coin supérieur droit. Tout les formats d'images sont supportés, mais les images transparentes au format png donne le meilleur résultat.
overstretch (true,false,fit,none) : Détermine l'étirement de l'image ou de la vidéo pour les faire s'adapter au lecteur. La valeur par défaut est 'fit'.
showdigits (true,false,total) : Mettez la variable à faux (false) si vous ne voulez pas afficher le temps de la vidéo dans la barre de contrôle.
showdownload (true,false) : Mettez la variable à vrai (true) si vous souhaitez faire apparaitre un bouton de téléchargement.
showeq (true,false) : Mettez à vrai pour voir un égaliseur avec un joli effet graphique pendant que vous jouez un fichier mp3.
showicons (true,false) : Affichez ou cachez les icones de lecture. Par défaut, la variable est à true.
howvolume (true,false) : Utilisez cette variable pour l'affichage du volume.
thumbsinplaylist (true,false) : Si vous avez une liste de lecture qui contient des images d'apperçu, vous pouvez les afficher dans la liste en mettant la variable à vrai.

Variables de lecture :

autostart (true,false,muted) : Si la variable est à vrai, la lecture s'enclenchera automatiquement à l'ouverture de la page. Si vous activez la variable avec le paramètre 'muted', la vidéo se lancera mais avec un volume sonore à 0.
bufferlength (valeur numérique) : Détermine le temps que le flv doit être préchargé avant de lancer la vidéo. Par défaut, le temps est de 3 secondes.
repeat (true,false,list) : Par défaut, le lecteur s'arrete une fois que la vidéo est terminé. Mais vous pouvez, activer le mode de répétition soit avec le fichier, soit avec la liste de lecture.
rotatetime (valeur numérique) : Utilisez cette variable pour définir le temps d'affichage d'une image.
shuffle (true,false) : Si vous utilisez une liste de lecture, cette variable permet de faire une lecture aléatoire des fichiers.
volume (valeur numérique) : Le volume par défaut est de 80, mais vous pouvez également le modifier.

Variable d'intéraction :

audio (url) : Vous pouvez utiliser cette variable pour définir la localisation d'un fichier mp3 qui servira de piste audio additionnelle.
bwfile (url) : Image utilisée lors de la vérification de la bande passant.
callback (url) : Permet de faire des statistiques de la lecture des vidéos. Plus d'info.
enablejs (true,false) : Permet d'activer l'intéraction avec le javascript.
fsbuttonlink (url) : Par défaut, le lecteur affiche un bouton pour pouvoir voir la vidéo en plein écran si l'utilisateur possède au moins la version 9.0.28 de flash. Avec cette variable, vous pouvez le lier à une autre page pour un affichage plein écran et avec l'envoi de paramètres à l'aide de getQueryParamValue().
javascriptid (chaine de caractères) : Si vous contrôlez plusieurs lecteurs avec javascript, vous pouvez utiliser cette variable pour définir un ID unique à chaqu'un d'eux.
link (url) : Utilisez cette variable pour déterminer une url externe pour le téléchargement du fichier.
linkfromdisplay (true,false) : Vous pouvez mettre la variable à vrai pour que lors d'un clique sur la vidéo, vous soignez redirigez vers une page web (comme les vidéos de daily motion). Par défaut, un clique sur la vidéo entraine la lecture ou la pause de la vidéo.
linktarget (frame) : Permet d'ouvrir une page soit (par défaut) "_self" soit "_blank".
type (mp3,flv,rtmp,jpg,png,gif,swf,rbs) : Le lecteur détermine les types de fichier pouvant être lus. Cette méthode ne marche pas si vous utilisez une base de données.
useaudio (true,false) : Force la coupure du son par défaut de la musique additionelle.
usecaptions (true,false) : Si la valeur est à faux, cache la légende par défaut.
usefullscreen (true,false) : Mettez la variable à faux si vous voulez désactiver la fonction de plein écran de flash 9.
usekeys (true,false) : Désactive les contrôle au clavier par l'utilisateur. (espace, haut, bas, gauche, droite).

Pour plus d'information, visitez le site référence : www.jeroenwijering.com.