Lecteur video FLV avec playlist XML à ajouter sur son site ou blog

A la suite de mon astuce qui vous apprenait à insérer un lecteur video sur votre site web, vous avez été très nombreux à me demander comment faire pour ajouter une playlist à côté de ce  lecteur video ?

Une seule video à afficher, ça ne semble pas convenir à tout le monde ! Alors, je me suis mis au charbon pour vous préparer un tuto simple qui vous apprend à faire appel à plusieurs videos (au format flv) sur une même page web via l’ajout d’une playlist (au format xml)…. Le résutat final étant ce que vous voyez ci-dessus !

Pour arriver à afficher cette maginfique playlist, il vous faudra passer un certain nombre d’étapes

  1. Télécharger les fichiers player.swf et playlister.vbs
  2. Convertir Video en FLV
  3. Créer des vignettes JPG de vos videos pour la playlist
  4. Générer un fichier XML à partir de videos FLV
  5. Héberger SWF, JPG, FLV, XML sur Site Google
  6. Générer et copier coller un code HTML

Afin de simplifier au maximum mes explications, je ferai toutes les manipulations sur un espace perso Google Page Creator (service gratuit de création de page perso limité à 100 mo d’espace).

Télécharger les fichiers player.swf et playlister.vbs

3 fichiers à télécharcher:

  • player.swf : pour avoir un player flash sur son site
  • playlister.vbs : pour générer un fichier playlist xml à partir de d’un dossier contenant des videos flv
  • media player classic: pour lire les fichiers flv et réaliser des miniatures jpg

Convertir ses video au format FLV

Video FLV

Le player que je vous propose n’accepte que le format flv en entrée. Il faut donc convertir vos videos en flv (suivez mon tuto de conversion flv avec super). Le flv est un format de compression léger et particulièrement adapté à la diffusion de video en streaming... C’est ce format qui est utilisé notamment par YouTube et Dailymotion.

Un plugin firefox (DownloadHelper) permet d’ailleurs de télécharger les videos Youtube et Dailymotion au format flv.

Créer des vignettes JPG de vos videos pour la playlist XML

Placer toutes vos videos FLV dans un répertoire que vous nommerez flv (par exemple), comme ceci: 

Repertoire FLV

Nous allons ensuite créer des vignettes image d’aperçu pour chacune des videos. Ces vignettes seront au format jpg et porteront le même nom que leur video associée (ex: alvin.jpg pour alvin.flv)… On veillera aussi à ne pas les mélanger – dans un 1er temps – avec les videos flv.

Pour se faire, Ouvrez une video avec media player classic, comme ceci:

video media player

Appuyez sur le bouton pause, quand l’aperçu vous plaît… Et Faîtes File -> Save Image…  et enregistrez votre image dans un répertoire image en la renommant du même nom que votre fichier flv (ici: ateam.jpg pour ateam.flv)

image flv

J’ai 6 fichiers video, il va falloir que je réitère cette manipualtion 5 fois de plus… Ensuite, j’aurai toutes mes vignettes:

vignettes flv

Créer une playlist XML à partir de nos videos flv

Pour avoir une playlist, on est obligé de créer un fichier XML… Rassurez-vous, rien de très technique dans tout ça, il suffira de glisser déposer votre dossier flv (contenant exclusivement des videos au format flv) vers le fichier playlister.vbs (script qui crée sous windows un fichier xml playlist)… J’ai récupéré le fichier vbs chez Charlie Craig et je l’ai adapté à notre problématique.

On glisse et dépose notre dossier flv vers playlister.vbs comme ceci:

playlister vbs creation xml

A la suite de cela, vous aurez ce type de message pour confirmer la création du fichier playlist.xml:

creation playlist xml

On peut ouvrir le fichier xml (avec le bloc notes) qui se trouve à la racine de notre dossier flv pour voir à quoi il ressemble

playlist xml structure

Dans title, c’est le titre qui s’affichera dans notre playlist, location (nom de notre video), et image (nom de l’image)… Il est important donc de bien nommer vos fichiers flv, et de donner le même nom à vos fichiers images !

Si vous connaissez l’url du dossier de destination de vos images, il peut être judicieux de la rajouter maintenant devant chaque fichier jpg après la balise <image>, comme ceci :

ajouter chemin absolu dossier image

En la rajoutant, on es sûr que les vignettes s’afficheront. au chargement du player.

Héberger tous nos fichier sur un site web

Nous allons maintenant mettre tous nos fichiers sur un site web dans un même répertoire de destination… Je vais pour ma part tout placer à la racine de mon espace google page creator…. Voici les fichiers à transférer (on mélange tout ensemble maintenant) :

fichiers à transférer

Comme j’ai 6 videos en stock, j’ai donc:

  • 6 fichiers flv
  • 6 fichiers jpg
  • 1 fichier player.swf
  • 1 fichier playlist.xml

Si vous avez un serveur FTP, vous allez pouvoir tout transférer d’un coup, sinon c’est fichier par fichier dans Upload Stuff (page de configuration de votre espace google page creator), on fait parcourir et on ajoute à chaque fois un nouveau fichier

upload stuff google page creator

C’est quasiment fini ! nous n’avons plus qu’à générer un code HTML que l’on pourra copier-coller sur un blog ou site perso.

Générer un code HTML pour copier-coller sur blog

Rendez-vous sur le générateur de Jeroen Wijering, c’est le lui le boss de la customisation de player flv !

générateur de FLV avec Playlist

On doit avoir flvplayer with a right-side chapterlist sélectionné … On clique sur Embed parameters pour indiquer le chemin absolu de notre fichier player.swf, et les dimensions de notre lecteur avec playlist (moi j’ai mis 490×200)

embed parameters

Cliquez ensuite sur File Properties, dans la zone file ajouter le chemin absolu de votre fichier xml comme ceci

file properties

Il y a d’autres options de customisation (couleur, template,…), on va les passer… Cliquez sur Update et preview code pour avoir un aperçu de votre lecteur flv avec playlist

aperçu

Il est possible que les vignettes à gauche des titres ne s’affichent pas correctement dans l’aperçu (problème de chemin absolu de vos fichiers images dans le fichier xml ?)…. En dessous de l’aperçu, cliquez sur the embed code.

embed code

Vous n’aurez plus après qu’a copier-coler le code sur un blog…

code html playlist à coller

 

Comme ceci ;-)

A vous de jouer maintenant !


advertising


77 commentaires à propos de “Lecteur video FLV avec playlist XML à ajouter sur son site ou blog

  1. Bonjour jean,

    Je ne vois pas de lien acif pour Télécharger les fichiers player.swf et playlister.vbs.

    ET petite question avec quoi tu as fait ton montage de la vidéo rap sur le sujet (c’est trop fort- il y a un tuto sur ça ??)

    En tout cas bonne continuation pour ton site

    @bientot
    denis

  2. Bonjour Jean,

    Merci pour la réponse pour les liens,
    La fatigue ou la vieillesse me guettent – lol

    J’essaie de ce pas le logiciel STOP motion animator

    Bonne continuation

  3. Bonjour,

    j’utilise un autre player sur un blog dotclear.
    Je souhaiterai savoir si par hasard quelqu’un saurait comment mettre une miniature comme le fait Jean sur son player avant que l’on lance la vidéo…

  4. Bonjour
    J’ai bien suivi le tuto et cela fonctionne, mon souci est le suivant :
    Une fois le code copier sur mon site dans un bloc HTML, rien ne s’affiche !! Alors que j’ai bien les videos dans le preview ?

    De quoi cela peut t il venir ? Merci de votre aide

  5. Ok, je comprends… si tu mets ça sur Free, ça sera super lent à chaque fois ! tu peux mettre tes videos aussi sur les serveurs de google: page.google.com ou sites.google.com, c’est gratuit et les temps de réponse sont très rapides.

  6. Bonjour,
    merci pour cet excellent tuto qui m’a permis de réaliser ce queje voulais;
    sauf:
    je n’arrive pas a avoir lesimages de video dans la partie de droite(playlist) (je dois etre trop vieux pour bien tout comprendre)voici le .xml:

    JJ

    video/janis-joplin.jpg
    janis-joplin-Summertime-1969.flv

    JJ2
    video/janis-joplin-cry-baby.jpg
    janis-joplin-cry-baby-1970.flv

    JJ3
    video/janis-joplin2.jpg
    janis-joplin2.flv

    MERCI pour votre réponse

  7. Bon: je ne vais pas encombrer le blog par mes copier/coller véreux;
    donc question simple :
    mes video s’enchainent bien avec le bouton suivant; l’image .jpg de la video s’affiche bien; TOUT cela dans la partie de GAUCHE (l’ecran du lecteur), mais rien à DROITE , j’ai vérifié et reverifié mon code xml et html mais rien n’y fait.
    Une idée?????
    Merci

  8. merci, super le tuto, mais le lien telecharger player.swf et playlister.vbs est mortibus. en bas de mon ecran à gauche au survol de ce lien, il y a :terminé.enfin chez moi.
    merci d’avance, jean viet.
    crikooo.

  9. svp ne copiez pas de code javascript, html dans les commentaires, c’est filtré pour des raisons évidentes de sécurité…. Faites un lien vers votre fichier hébergé chez vous, j’irai regardé.

  10. Help suite à conversion video mwm via video flv..

    Bonjour…

    Avant de poser mon « help », je remercie JeanViet pour tous ses tutos.. c’est génial..

    Mon « help »…

    J’ai fait un montage video avec Movie Maker (oui je sais.. errrkkk) mais bon je ne suis pas une pro hein !

    J’ai fait la conversion en flv avec Super.. j’ai suivi à la lettre votre tuto.. je me suis débrouillée comme je pouvais, car je n’ai pas trouvé (où mal vu) d’exemple pour MWM via FLV..

    Lorsque je mets le script flash (parce que le code Embed ne fonctionne pas), tout s’affiche bien.. j’ai le même modèle que vous montrez sur votre page, avec la photo et la playlist à droite..

    Mais… … j’ai un souci car sur la partie video, j’ai un message qui me dit : « Video stream not found ».. pourtant l’image apparaît bien sur la partie video.

    Lorsque je regarde votre tuto, vos fichiers vidéos flv sont représentés par une sorte de logo. Or moi, mes fichiers vidéos, après la conversion, sont représentés sous forme de fichier (comme une feuille avec le coin en haut à droite cornée, avec des petits carrés de couleur dedans).. C’est pourtant bien un fichier video, puisqu’il fait 14 Mo..

    Est-ce la raison pour laquelle le player SWF ne trouve pas ma video ?

    Auriez-vous la gentillesse de m’aider SVP ?

    Je vous en remercie..

    MissMe

  11. Mon antivirus AVIRA « refuse » le téléchargement de playlister.vbs, virus détecté. Dommage :-(
    On peut le télécharger ailleurs ?
    cordialement
    jf

  12. Voila j’ai installé le lecteur video avec la playlist de Jeanviet et tous fonctionnait bien.

    Mais depuis ce soir, le lecteur me lit que la premiere et la derniere video ??

    Alors que je n’ai rien changé, si quelqu’un as deja eu ce probleme, ou qu’on puisse m’aider.

    Merci a tous

  13. Bonjour jeanviet,

    Super site de tutos, combien d’années faut-il pour maitriser tous ces tutoriels et ces logiciels? Ma vie n’y suffirait pas, je pense…
    Rien qu’aujourd’hui où j’ai passé l’AM en recommençant plusieurs fois le tuto sur le player flv et sa playlist…
    Je n’y arrive pas!
    Dans mon éditeur HTML (Komposer) j’ai ça comme message:

    Warning: strpos() [function.strpos]: Offset not contained in string in /mnt/webdata1/webs/ismedia.exeter.ac.uk/docs/playerfiles/flvplayer.php on line 24
    The domain is not allowed access to this FLV video player!

    Et sur mon site, un message s’affiche….Les pages perso de chez.com n’accepterait pas ce player FLV? C’est ce que je comprends….
    Peux-tu m’éclairer….un peu?

    D’avance, merci

    Denis

  14. J’ai utilisé ce lecteur sur mon site. ça fonctionne parfaitement quand on utilise Internet Explorer, par contre avec firefox, le lecteur n’apparaît pas. Est-ce normal ? Y-a-t’il quelques chose à faire pour régler le problème ?

    D’avance merci de vos réponses …

  15. Bonjour JeanViet..

    Me voici de retour après des « vacances » forcées à l’hôpital.. Bon, on va dire que çà va hein ! et garder le moral..

    Je reviens donc vers toi, avec le lecteur video JW + playlist à droite.

    Mon problème est que la video+playlist+images ne s’affichent pas.

    La playlist+la video+l’image sont dans un dossier nommés flv.
    Le player.swf et le swfobject sont à la racine du site.

    J’ai essayé diverses façons (tout dans le même dossier, ou tout à la racine du site, rien n’y fait).

    Ci-dessous : ma playlist et le script sur ma page web.

    playlistvideos

    25032007venelles
    25032007venelles.flv
    25032007Venelles.jpg

    ———

    The player will show in this paragraph


    ———

    Le code « embed » ne fonctionne pas chez moi..

    Aurais-tu la gentillesse de me dire ce qui ne va pas ?

    Je te remercie de ton aide,
    MissMe

  16. je suis en train de tester ce lecteur flash qui est un veritable petit bijou… cependant, j’aimerai forcer le no resize car un coup ma video est en 16/9 (format d’origine 512×288) et sur un nouveau clic elle passe en 4/3… je n’y comprends rien… quelqu’un pourrait m’aider ? merci

  17. Salut Jeanviet, j’ai une petite question toute simple, mais je ne trouve pas la réponse sur la toile… Sais-tu si un fichier video en .flv est lisible depuis flash player 6 ? si non, à partir de quel flash player je peux le lire ?
    Merci d’avance

  18. Salut jeanviet,

    j ai une question a propos de votre lecteur :
    est il possible de faire disparaitre la barre de controle un fois la vidéo lancer???

    merci d avance
    raph

  19. Bonjour
    Super tuto et génial ce petit lecteur
    j’ai juste une question
    est-il possible de faire en sorte que le lecteur enchaine les fichiers en remontant la playliste (plutôt que l’inverse ???

    loba

  20. Bonjour,
    merci pour votre tuto très bien fait. Toutefois je ne peux pas avoir le lecteur avec affichage à droite, parce que l’exemple « flvplayer with a right-side chapterlist.. » n’est pas dans la liste des setup du site « logtailvideo ». Comment faut-il faire afficher ce lecteur.
    Merci
    Claude

  21. bonjour,
    merci infiniment pour le tuto. c’est très détaillé … vu que je suis un novice dans le domaine, j’ai bloqué au niveau du copier coller le code html ( au fait le site proposé m’a généré un code script type ) au fait j’ai « uploadé » les fichiers flv et les fichier jpg ainsi que le player.swf sur le site en question mai je ne sais plus comment aboutir à une page web finale avec la liste des video et le lecteur..
    merci infiniment et excusez mon ignorance

  22. Bonjour,
    J’ai trouvé la réponse à ma question d’affichage. Pour avoir la playlist à droite, il suffit de remplacer playlist=bottom par playlist=right, dans la ligne flashvars.

  23. bonjour,

    j’ai généré le code html (dernière étape du tuto) mais où dois-je exactement copier ce code
    svp si qqn connaît comment faire
    merci de votre aide

  24. ba moi ça marche sauf qu’il ny a plus le meem choix sur le site : flvplayer with a right-side chapterlist
    donc j’ai prit le seul avec playlist et les video sont en dessous, un peu moin jolie.
    une soluce ?

  25. Quand j essais de glisser mes flv dans le playlister.vbs
    il y a un message d erreur ??????? (this script only works with folders,if cannot process)
    svp
    Si tu peux me faire un suivi là dessus….car j aimerais bien
    l’avoir sur mon site ce lecteur
    merci

  26. Bonjour

    Il faut glisser le dossier contenant les FLV (et que des FLV)dans « playlister.vbs  » et non pas les FLV eux-même.

    Et sinon, bravo l’ami jeanviet, du bon boulot efficace qui marche et qui rends de la balle !

    Moi, j’ai juste un truc qui me chagrine à peine, la jpg qui s’affiche dans le lecteur est tjrs la même (la première de la liste) meme si je lance et stop une autre video.

    Par contre, pour les vignettes a coté du nom des vidéos, c’est nikel.

    Voilà, en cas que qqn est la réponse …

    Bye

  27. Merci Le Peps….tu sais c est évident pour les pros…mais moi je suis novice..lollll
    là j ai un autre prob. !!
    Quand je entre le code donné sur ma page htlm..j ai un code d erreur et de plus je ne vois pas mes images…haaaaaaaaaaaaaa
    les esprits de codes…pas facile quand tu te débrouille seul pour faire un site web…oufffffffffff

  28. Merci pour le tuto.
    Tout va bien, sauf bien sûr un certain nombre de chose que je devrai maitriser.
    J’ai trouver comment mettre le playlist en bas et comment le rendre horizontal. Par contre je ne vois pas comment éliminer l’espace réservé au titre de l’image. J’ai aussi utilisé Moyea Player box mais il m’en manque encore. Des paramètres sans doute. Pouvez-vous m’aider? Mes essaies sont sur http:/labottinerie.ca/rene/playlist1, 2 et 3. Je suis prèt à débourser un peu pour accélérer mon apprentissage.

    Merci encore

  29. Bonjour,
    D’abord merci pour le tuto, cela fonctionne mais avec une petite différence, ma playliste se retrouve en dessous du lecteur. Comment faire pour qu’elle apparaisse à sa droite comme sur votre exemple.Y a t-il quelque chose que je n’ai pas fait.
    Merci encore

  30. super, reussi sans soucis. Il y a deux choses que je n’ai pas trouvé !
    1. comme mettre les miniatures à la taille que moi je désire ? Car il se met toujours à la meme taille.
    2. Unw fois que ma video ou photo et sur le player, comme faire pour cliquez dessus et arrivez sur une autre page, un link sur image en fait ?
    merci pour votre reponse et merci pour ce script genial

  31. bjr,
    le tuto est bon ,je suis parvenu a appliquer toutes les fonctions.Seulement,je comprends pas pourquoi la fenetre des films avec les petites vignettes s affichent sous le lecteur et pas a coté.
    merci de m aider parce que la je capte pas.
    cordialement.

  32. Bonjour,
    Grâce à ce tuto, j’ai compris comment utiliser une playlist et, après avoir réglé un petit problème de crossdomain, ça fonctionne parfaitement sur le site Longtailvideo de Jeroem Wijering. Mais sur mon site j’ai une erreur 403:Error #2032
    J’ai bien récupéré la dernière version de player.swf
    Quelle peut être l’explication ?
    Merci de l’aide

  33. Bonjour,
    Tout d’abord, félicitations pour les tutos, très clairs.
    Je voudrais customiser mon lecteur video (en l’insérant dans une image .png de téléviseur), mais je cale.
    Le générateur de http://www.flv-player.net le permet mais je n’ai pas su le reproduire avec celui de Jeroen Wijering.
    Auriez-vous une solution à m’apporter ?

  34. Bonjour,
    Ce tutorial m’a aidé énormément. Un grand merci !
    Si quelqu’un connaissait un truc pour faire accepter le player et la playlist par Firefox ! Un code modifié ? Merci de vos réponses, pas moyen de trouver une solution.
    Bonne journée

  35. bnj
    j’ai un probleme , quand je clique preview & upload ça m’affiche un erreur et ya pas de code html
    qqn puisse m’aider svp.
    Pour l’hebergement de fichier xml est ce que je copie le lien de telchargement car ya pas du lien d’afficher ????????

  36. Bonjour et merci pour ce tuto
    Hélas, j’en perds mon latin, il n’est pas fait pour moi qui suis un peu nul dans cette matière, qui donc pourra m’aider sur ce coup là, le site dont je représente l’association, doit être pourvu de videos des artistes lors de leurs prestations, et ca je ne sais pas faire, il y a t-il une âme charitable, qui daignera m’aider? Merci d’avance!
    Cordialement
    59arcl

  37. Je n’ai rien contre l’article, mais je suis en désaccord avec un couple de points à certaines extenct . Je suis probablement une minorité bien , lol . Merci pour le partage sur astuces.jeanviet.info . Cordialement !

  38. Bonjour Jean-Baptiste,
    bravo pour ta présentation on ne peut lus claire. Malheureusement, moi, j’ai un problème avec la génération de code et le site de Monsieur Jeroen Wijering. Je n’ai trouvé aucun moyen de générer le moindre code que je pourrais utiliser en local, à partir de mon ordinateur. J’ai dû rater un épisode. Je serais très heureux d’avoir un peu d’aide.
    Merci et encore bravo.

  39. Bonsoir Jean
    avant tout merci pour le partage.
    1)j’ai suivi tous les conseilles, mais arriver au nivaux de la generation du code je suis blocke…c’est pas quoi faire.
    2)je me suis servi du code affiche dans le tuto auquel j’ai fait adapte mes donnees.resultat le lecteur s’affiche aucune image.seul le lecteur s’affiche et quand je lance le play ca met: video introuvable. que faire? merci d’avance

  40. bjr. je vens de decouvrir votre blog. et je le trouve bien. seulement je suis bloqué à l’étape n°6 : « Générer un code HTML pour copier-coller » et je ne sais pas comment générer mon code html. cest comme le site a changé et je ne me retrouve plus
    que faire svp?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>