HTML - Jukebox vidéo en flash

Auteur : 3L!X | Créé le : 26/12/2007 à 15H00

Nous allons voir comment insérer un jukebox vidéo sur votre site (format .flv).
Ce jukebox est en flash, de façon à être compatible avec tous navigateurs, et de ne pas à avoir à charger de plugin supplémentaire.

Le lecteur peut changer de couleurs grâce à des paramètres optionnels (voir ci-dessous).

Encodage d'un fichier source

Tout d'abord il faut encoder votre vidéo (Avi, Mpeg, Mov, Wmv) en .flv (Flash Video).
Pour cela il existe un logiciel gratuit : Riva FLV Encoder 2.0.

Une fois le logiciel installé et lancé, il vous faudra paramétrer les différentes options, à savoir :

1. La vidéo de départ (Input)
2. La vidéo de sortie au format FLV (Output)
3. La résolution de la vidéo (Movie Size)
4. Le framerate (Image/seconde)
5. Le bitrate vidéo (Kbit/seconde)
6. Le bitrate audio (Kbit/seconde)

Une capture de mes paramètres au cas où (cliquez sur l'image pour l'agrandir).

Mise en place du lecteur

Une fois votre fichier .flv créé, vous pouvez à présent mettre en place le lecteur vidéo dans votre page web.
Téléchargez le fichier flvmulti.rar, et décompressez le pour récupérer les fichiers flvmulti.swf et config_flvmulti.txt.

Copiez ces fichiers et votre vidéo .flv à la racine de votre site ou dans un répertoire de votre choix.

Puis recopiez ce code sur votre page web, en modifiant les infos surlignées suivant votre configuration et emplacement :

<object type="application/x-shockwave-flash" {noir}data="/mon_repertoire/flvmulti.swf" width="240" height="180"{/noir}>
  <param name="movie" {noir}value="/mon_repertoire/flvmulti.swf"{/noir} />
  <param name="flashvars" {noir}value="config=/mon_repertoire/config_flvmulti.txt"{/noir} />
  <param name="wmode" value="transparent" />
  <param name="menu" value="false" />
</object>

Notre fichier config_flvmulti.txt (Voir "Paramètres du Jukebox" ci-dessous):

{noir}flv=/mon_repertoire/megawash.flv|/mon_repertoire/blaupunkt.flv
title=MegaWash|Blaupunkt
width=240
height=180{/noir}
margin=1
showstop=1
showvolume=1
autoload=1

Paramètres du Jukebox

Voici les différents paramètres optionnels pour ce lecteur, à ajouter dans votre fichier "config_flvmulti.txt" :

• "flv=" Indique les adresses relatives ou absolues des fichiers flv, séparés par des |.
• "width=" Largeur en pixel du film.
• "height=" Hauteur en pixel du film.
• "buffer=" Le nombre de secondes pour la mémoire tampon (5 par défaut).
• "buffermessage=" Le message de la mémoire tampon.
• "buffercolor=" La couleur du texte du message tampon.
• "bufferbgcolor=" La couleur de fond du message tampon.
• "buffershowbg=0" Pour ne pas afficher le fond du message tampon.
• "title=" Les titres séparés par des |.
• "titlesize=" La taille de la police du titre (20 par défaut).
• "titlecolor=" La couleur du titre (ffffff par défaut).
• "margin=" La marge de la vidéo par rapport au Flash (4 par défaut).
• "autoplay=1" Pour lire automatiquement.
• "autoload=1" Pour lancer le chargement.
• "autonext=0" Pour ne pas lire automatiquement la vidéo suivante.
• "shuffle=1" Pour lire aléatoirement.
• "showstop=1" Pour afficher le bouton STOP.
• "showvolume=1" Pour afficher le bouton VOLUME.
• "showprevious=1" Pour afficher le bouton PREVIOUS.
• "shownext=1" Pour afficher le bouton NEXT.
• "showopen=0" Pour cacher le bouton OPEN.
• "showtime=" (1) pour afficher le temps, (2) pour afficher le temps restant.
• "showplayer=" Affichage de la barre des boutons : autohide, always ou never.
• "showloading=" Affichage du chargement : autohide, always ou never.
• "loop=1" Pour lire en boucle.
• "startimage=" Les images de titre séparées par des |.
• "playercolor=" La couleur de fond du lecteur (pas du flash).
• "loadingcolor=" La couleur de la barre de chargement.
• "bgcolor=" La couleur de fond.
• "bgcolor1=" La première couleur du dégradé du fond.
• "bgcolor2=" La seconde couleur du dégradé du fond.
• "buttoncolor=" La couleur des boutons.
• "buttonovercolor=" La couleur des boutons au survol.
• "slidercolor1=" La première couleur du dégradé de la barre.
• "slidercolor2=" La seconde couleur du dégradé de la barre.
• "sliderovercolor=" La couleur de la barre au survol.
• "scrollbarcolor=" La couleur de la barre de défilement.
• "scrollbarovercolor=" La couleur de la barre de défilement au survol.
• "currentflvcolor=" La couleur de la vidéo sélectionnée.
• "onclick=" L'URL de la destination au click sur la vidéo. Par défaut à playpause qui signifie que la vidéo fait play ou pause au click. Pour ne rien faire, il faut mettre none.
• "onclicktarget=" La cible de l'URL au click sur la vidéo. Par défaut à _self. Pour ouvrir une nouvelle fenêtre, mettez _blank.
• "playertimeout=" Le délai en milliseconde avant que la barre du lecteur se cache (1500 par défaut).
• "videobgcolor=" La couleur du fond de la vidéo quand il n'y a pas de vidéo.
• "videodelay=" La durée d'affichage du titre au changement de vidéo, en milliseconde (0 Par défaut).
• "shortcut=0" pour désactiver les raccourcis clavier.
• "volume=" Le volume initial, entre 0 et 200 (100 par défaut).
• "showfullscreen=1" Pour afficher le bouton pour le plein écran (nécessite Flash Player 9.0.16.60 ou supérieur).
• "showswitchsubtitles=1" Pour afficher le bouton qui affiche/cache les sous-titres.
• "playlisttextcolor=" La couleur du texte de la playlist.
• "loadonstop=0" Pour arrêter le chargement de la vidéo au STOP.
• "phpstream=1" Pour utiliser un streaming PHP.
• "ondoubleclick=" Action sur le double click : none, fullscreen, playpause, ou l'url à ouvrir.
• "ondoubleclicktarget=" La cible de l'URL au double click sur la vidéo. Par défaut à _self. Pour ouvrir une nouvelle fenêtre, mettez _blank.
• "showmouse=" Affichage de la souris : autohide, always ou never.

Les raccourcis clavier

[1] commentaire - Voir/Editer

---

Commentaire

1 commentaire pour "HTML - Jukebox vidéo en flash"

Posté le 15/11/2009 à 19h28, par TURBOFREDO.com

Super ce lecteur !

2 petites questions :

* comment utiliser les caractères accentués dans les titres (j'ai tenté d'enregistrer le fichier en UNICODE mais ça ne change rien) ?

* existe t-il un paramètre permettant de modifier le texte "buffering %" ?

Merci.

Turbo Fredo

Poster un commentaire

Pour poster un commentaire vous devez être membre
Connexion | Inscription