Ajouter des musiques ou des vidéos sur son site gràce à Dewplayer et JWplayer
Voilà un nouveau tutoriel ! Aujourd’hui je vais vous montrer comment on peut intégrer de la musique ou des vidéos sur un site internet en utilisant Dewplayer et Jwplayer. Les musiques seront envoyés vers votre serveur ftp en format « .mp3″ et les vidéos seront envoyés au format flash « .flv ».
Tutoriel : Ajouter des musiques et des vidéos sur son site
envoyé par zone-tuto. – Vidéos des dernières découvertes scientifiques.
Encore une fois c’est un tutoriel assez simple, mais je vais vous donner quelques renseignements supplémentaires.
Pour télécharger dewplayer, il suffit de se rendre à cette adresse. Il y a aussi le « générateur de code » comme je vous l’ai expliqué. Ou cas ou, voici les codes que j’utilise dans la vidéo pour intégrer mes lecteurs.
<h2>Dewplayer</h2> <p>Version Basique : 1 fichier</p> <object type="application/x-shockwave-flash" data="musique/dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="musique/dewplayer.swf" /> <param name="flashvars" value="mp3=musique/mp3/01.mp3" /> </object> <br/> <p>Version Mini : 1 fichier </p> <object type="application/x-shockwave-flash" data="musique/dewplayer-mini.swf" width="160" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="musique/dewplayer-mini.swf" /> <param name="flashvars" value="mp3=musique/mp3/01.mp3" /> </object> <br/> <p>Version Multi : 3 fichiers</p> <object type="application/x-shockwave-flash" data="musique/dewplayer-multi.swf" width="240" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /> <param name="movie" value="musique/dewplayer-multi.swf" /> <param name="flashvars" value="mp3=musique/mp3/01.mp3|musique/mp3/02.mp3|musique/mp3/03.mp3" /> </object> <br/> <p>Version playlist : 3 fichiers</p> <object type="application/x-shockwave-flash" data="musique/dewplayer-playlist.swf" id="dewplayerpls" name="dewplayerpls" width="240" height="200"> <param name="movie" value="musique/dewplayer-playlist.swf"> <param name="flashvars" value="xml=musique/playlist.xml"> </object>
Je vous l’ai déjà dit dans la vidéo, mais vous pouvez très facilement copier/coller ces codes et seulement modifier ce qui est nécessaire, c’est-à-dire le chemins vers vos fichiers et les mp3 à lire. En fait ce qui change d’un code à l’autre se sont les chemins, les mp3 et la version du player utilisé. Par exemple « dewplayer » , « dewplayer-playlist » etc…. Parlant des playlists, voici un exemple d’un fichier XML utiliser pour créer la playlist du tutoriel :
<playlist version="1"> <!--on ouvre cette balise pour indiquer au player qu'on utilise du xml, c'est une norme --> <title>Tutoriels Video</title><!--on donne un titre a notre playlist --> <creator>bvek1</creator><!--on precise le nom/pseudo du createur--> <link>http://www.tutoriels-video.fr/</link><!--un lien vers le site internet--> <info>Playlist de tutoriels-video.fr</info><!--et quelques informations supplémentaires--> <image/> <trackList><!--on ouvre cette balise pour signaler qu'on commence notre liste de mp3 --> <track><!--on ajoute une nouvelle musique--> <location>musique/mp3/01.mp3</location><!--on precise le chemin de la musique par rapport au fichier .htm ou sera integre celle ci--> <creator>Daft Punk</creator><!--nom de l'artiste--> <album>Daft Club</album><!--album--> <title>Aerodynamic [Daft Punk rmx]</title><!--titre de la musique--> <annotation>I love this song</annotation><!--un petit commentaire perso--> <duration/><!--ici j'ai choisi de ne pas indiquer le temps--> <image>AlbumArtSmall.jpg</image><!--l'image de la pochette par exemple--> </track><!--On ferme la balise track pour dire qu'on a fini avec cette musique--> <track><!--et on recommence ...--> <location>musique/mp3/02.mp3</location> <creator>Daft Punk</creator> <album>Daft Club</album> <title>Aerodynamic [Slum village rmx]</title> <annotation>I love this song</annotation> <duration>217</duration> <image>AlbumArtSmall.jpg</image> </track> <track> <location>musique/mp3/03.mp3</location> <creator>Daft Punk</creator> <album>Daft Club</album> <title>Aerodynamic</title> <annotation>I love this song</annotation> <duration>484</duration> <image>AlbumArtSmall.jpg</image> </track> </tracklist><!--on oublie pas de fermer tracklist--> </playlist><!--De meme pour playlist-->
Je ne pense pas avoir besoin de revenir dessus, j’ai commenté un peu le code histoire que vous compreniez un peu mieux !
Maintenant passons aux vidéos. Pour commencer il faut télécharger le « script » dewplayer à cette adresse, prenez bien la version flash et pas la version silverlight, c’est une technologie développée par Microsoft et le problème c’est que peu de navigateur la possède (contrairement à flash). Voici des exemples de codes :
<h2>JW player</h2>
<p>Première version</p>
<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='video/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('video/player-viral.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=flv/compil.flv');
s1.write('preview');
</script>
<p>Deuxième version : embed</p>
<embed
src="video/player-viral.swf"
width="400"
height="300"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=flv/compil.flv"
/>
<p>Troisième version : playlist</p>
<script type='text/javascript' src='video/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('video/player-viral.swf','ply','470','470','9','#');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','video/playlist.xml');
so.addVariable('playlist','bottom');
so.addVariable('playlistsize','180');
so.write('mediaspace');
</script>
Je ne vais pas trop revenir sur ces codes, je l’ai déjà expliqué dans la vidéo et en plus il suffit de faire un copier/coller en modifiant 2-3 trucs (comme les chemins vers les fichiers mp3 et swf) et ça fonctionne. Il est inutile d’apprendre tout cela par cœur ! Je vais vous mettre le code de la playlist aussi (cette fois si je ne le commente pas, c’est comme pour la playlist des musiques) :
<playlist version="1"> <title>Exemple d'une playlist</title> <info>http://www.tutoriels-video.fr/</info> <tracklist> <track> <title>Compil XCM</title> <creator>Dan and dave</creator> <info>www.dananddave.com</info> <annotation> Video d'xcm </annotation> <location>flv/compil.flv</location> </track> <track> <title>Tuto effet graphique</title> <creator>bvek1</creator> <info>http://www.tutoriels-video.fr/</info> <annotation> Compiz Fusion </annotation> <location>flv/effet.flv</location> </track> <track> <title>Tuto session phpbb</title> <creator>bvek1</creator> <info>http://www.tutoriels-video.fr/</info> <annotation> Session phpbb3 </annotation> <location>flv/sessionphpbb.flv</location> </track> </tracklist> </playlist>
Le seul piège dans ce code, c’est que contrairement à la musique, le chemin de vidéo se situe par rapport aux fichiers « player.swf », « yt.swf » et « swfobject.js » qui doivent se situer dans le même dossier.
Quelques informations supplémentaires :
Dans la vidéo, je n’ai pas expliqué comment convertir des vidéos au format FLV et si vous faites des recherches sur google vous trouverez surement la réponse, mais d’après mon expérience personnelle on en vient souvent à télécharger et installer 3-4 programmes avant de trouver le bon. Vous pouvez lire ce dossier sur commentcamarche.net !
Un petit détails pour les mp3 aussi, il faut que vos fichiers soient échantillonné à 44100 Hz (clique droit/propriété) sinon votre musique sera accéléré ou ralenti.
Je pense que j’ai fait le tour, néanmoins si vous avez des questions, laissez des commentaires !
Publié le 20 décembre 2009 par Madrzejewski Alexis dans Développement web, Tous les tutoriels vidéos
41 commentaires
Ajouter un commentaire
Ici les commentaires sont en DoFollow, profitez-en mais en abusez pas !
Veuillez ne pas poster de code (php, html ou autre) car il sera bloqué par le site.
Les commentaires ne sont pas immédiatement validés.
Merci de faire une recherche sur Google avant de poser une question.
Merci pour ce tuto qui explique bien le fonctionnement du JW player!
Je me demandais par contre si je pouvais intégrer directement le JW player dans une page faite avec flash CS4?
Tu crois que c’est possible ?
Merci
Bonjour,
Je ne travaille pas en flash, et en fait je ne voie pas ce que vous voulez faire. Peut être que la documentation pour les développeurs vous aidera :
http://developer.longtailvideo.com/trac/wiki
Pingback: Les tweets qui mentionnent Ajouter des musiques ou des vidéos sur son site gràce à Dewplayer et JWplayer - Tutoriels-Video -- Topsy.com
Bonjour,
Je me demandais pourquoi vos tuto étaient toujours publier sur Dailymotion au lieu d’utiliser JWPalyer ? Vous avez certainement une bonne raison, mais avec un tel tuto, il serait dommage de ne pas le déployer sur votre blog
Bonjour,
J’aimerai bien avoir mes vidéos sur mon serveur ftp et utiliser JWplayer, mais je n’ai qu’un seul GO de libre et ma bande passante est limité donc je ne peut pas me permettre cela
Et puis dailymotion m’apporte quelques visiteurs supplémentaires de temps en temps
Ok, je comprends mieux
Peut-être que le Père Noël sera généreux et pensera à vous offrir un serveur avec plus d’espace disque
Bonjour,
Message d’une grande débutante : dès que j’aurai résolu mon problème Dewplayer qui dure depuis plusieurs jours, je mettrai en ligne mon « petit site », mais voilà, même en suivant le tutoriel pas à pas, ça ne marche pas… La barre sur la page publiée m’indique « no mp3 file », et pourtant, j’ai mis le mp3 et le dewplayer.swf à la racine du site (pas de chemin à indiquer). Peut-être une suggestion ????
Bonjour,
Arf, c’est un problème de chemin
et généralement c’est galère ce genre de chose.
J’ai regardé votre site, malheureusement le code source est généré par un logiciel et c’est pas super clean, du coup c’est difficile de voir les erreurs
Vous pouvez essayer une méthode « bourrin », mettre le chemin de la musique comme ceci :
http://www.floreveil.com/musique.mp3
Mais un truc m’intrigue, c’est qu’en bidouillant j’ai découvert que le lecteur qui plante (celui en gris au milieu) est intégré avec ce code :
Je pense que le problème vient de la, il n’y a pas de « value » et en plus j’ai déconseillé de prendre ce code
Essayez :
Apparemment il y a un deuxième player qui lui semble fonctionné, mais comme je l’ai dit le code généré est confus, donc je suppose que vous parlez du premier player.
N’hésitez pas a laissé un autre commentaire si vous n’y arrivez pas
La méthode bourrin ne marche pas non plus. Je suis intriguée par l’histoire du 2ème dewplayer. Moi je n’en visualise qu’un. J’suis désolée d’être si débutante, mais bon, j’ai pas le choix, alors j’essaie de me débrouiller, et même chez Alsa Créations j’ai pas eu de réponses… Dommage, parce que ce petit lecteur me plaît bien… Sinon, la seule méthode qui me reste et que je voulais éviter, c’est la liaison toute bête vers un mp3 ????????? En tous les cas, merci !
Faire un lien vers un MP3 c’est pas top
Je pense que le problème vient du logiciel que vous utiliser, et ça façon de gérer les pages, il y a des frames de partout (c’est pas top non plus ^^) et je pense que ça joue sur les chemins vers le mp3.
J’ai reproduit exactement le même cas sur une page que j’ai créé :
http://www.tutoriels-video.fr/tutoriel/test/test.html
Et ca fonctionne, le mp3, dewplayer sont situer dans le même dossier, et j’ai utiliser le code que je vous ai fournit.
En fait, ce qui m’aidera c’est de connaitre l’arborescence de votre site et les principaux fichier et dossier (si vous le désirez bien sur, si vous ne voulez pas mettre ça en public, utiliser ma page de contact).
Bonne chance
Edit: Apparemment la méthode « bourrin » fonctionne sur votre site, en tout cas chez moi le player a l’air de fonctionné.
Eureka !!!!! C’est bon ! Alors en fait, j’ai déplacé plus haut le code HTML que j’avais copié. J’avais bien copié à l’intérieur des balises body, mais pas au bon endroit. Et le 2ème dewplayer qui était là venait d’une insertion de plug in que j’avais lié à dewplayer.swf, ce qui était inutile… Merci, car c’est grâce à cette discussion lancée que j’ai pu trouver la solution !
Bonjours,
J’ai un souci, je n’arrive pas à faire marché Dewplayer … Que ce soit le Mini, Jukebox et autre. J’aimerai surtout faire marché le Jukebox sur mon site internet.
En faite j’arrive à afficher les musiques dans la playlist mais lorsque je clic dessus elle ne charge pas. J’arrive pourtant à la lire avec un autre logiciel !
Voici le code du Dewplayer Jukebox présent sur le site. Je me suis cassé la tête dessus pendant un bon moment ….
Merci d’avance pour tout aide qui sera la bienvenue !!!!
Bonjour,
Malheureusement le site à bloquer le code que vous avez posté et je ne vois rien du tout.
Néanmoins je pense que c’est juste un problème de chemins. Pour Dewplayer, il faut préciser le chemin dans le fichier par rapport au fichier .html ou les musiques seront intégrés.
Si ça ne fonctionne vraiment pas, essayer ma méthode « bourrin » en mettant directement htt//www.votre-site/dossier/truc.mp3″ dans le XML.
Bonne chance
Merci de ta réponse : )
Néanmoins j’ai également essayé de mettre le chemin que ce soit http://…. ou directement « dossier… »
Je suis près si tu es disponible à en parler sur msn par exemple et même te donner les passes pour que tu jette un œil des fois que !
Voici mon adresse msn –> corbi_@hotmail.fr
Bonne soirée.
Je viens de t’ajouter sur msn
Merci ! je viens de lire ce tuto et tout marche super bien avec Dew player Playlist alors que je n’arivais pas a le faire fonctionner depuis deux jours!
Merci encore!;)
bonjour, malgré toutes ces explications que je crois avoir appliqué à la lettre, je n’arrive pas à mettre une playlist sur mon site …; grrrr!
je suis sous win7, esst-ce que ça change quelque chose ???
merci pour ton aide
Bonjour,
Pour commencer le problème ne vient pas de Windows 7
Pour vous aidez, ce serai bien que j’ai plus de précisions comme l’arborescence de vos fichiers (son organisation). En effet, dans la plupart des cas, c’est un problème de « chemin » c’est à dire que les chemins vers les fichiers MP3 ne sont pas bon ou alors le player ou la playlist est mal intégré.
Si votre site est en ligne, laissez un lien et à l’occasion je le regarderai pour voir d’où vient le problème.
Bonne chance
Hello,
Peut-on utiliser JWPalyer sur un site hébergé par Free et y a t-il une limite dans le nb de lectures simultanées ?
Bonjour,
J’ai fait quelques recherches pour l’installation de jw-player sur free.fr et apparemment cela ne pose pas de problème, on procède normalement.
Je ne pense pas qu’il y a une limite de lecture, en revanche d’après mon expérience personnelle on ne peut télécharger qu’a 50-60 ko/s sur un serveur free (pour les non abonnés et pendant la journée) donc pour des vidéos je pense que c’est juste et que ça risque de prendre du temps (un visiteur mettra 10 min pour charger une vidéo).
Merci pour la réponse précédente.
La visualisation d’une vidéo fonctionne bien mais si propose plusieurs vidéos dans la même page sans passer par la playliste, ça ne marche pas, je n’ai que le premier player d’affiché qui correspond à la dernière vidéo.
J’ai essayé de changer id=preview par preview1 et var=s1 par s2, s3.., idem. Y a t-il une solution? merci
J’avais mal compris la question. (j’avais compris si c’été possible que plusieurs internaute regarde une vidéo en même temps).
Je pense qu’on est obligé de passé par la plyalist dans ce genre de cas. D’autant plus que c’est plus pratique et pas trop compliqué à mettre en place.
Plus d’info : ici, la (cette page indique comment faire une playlist de manière différente qu’avec un fichier xml, cela doit répondre à votre question) ou la.
La playlist fonctionne mais les videos n’ont pas la meme taille et les plus petites sont élargie à la dimension max du player. Peut-on éviter ça ?
Comment centrer le Player dans la page ?
Merci
Je ne sais pas si on peut éviter que la vidéo s’agrandisse automatiquement. J’ai regardé un peu sur la documentation officiel mais je n’est rien trouvé (je pensais qu’il y avait un paramètre pour ça, apparemment non, mais je l’ai peut être loupé).
Pour centrer le player au centre de la page c’est relativement simple et il existe plusieurs techniques. En fait il faut utiliser du CSS pour faire ça. Une méthode simple consiste à mettre des balises « div » avant et après le player et donnée un style « text-align:center; ». Exemple :
<div style="text-align:center;"> <p id='preview'>The player will show in this paragraph</p> <script type='text/javascript' src='video/swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('video/player-viral.swf','player','400','300','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=flv/compil.flv'); s1.write('preview'); </script> </div>Bonne chance
Bonsoir,
j’essaie ça dès demain !
merci pour ce tuto qui est très bien expliqué!! J’en cherchais un vraiment bien expliqué pour installer dewplayer sur mon site…et je crois que j’ai enfin trouvé
A.
Bonjour,
en fait c’est vraiment impossible à installer ce truc! C’est tout sauf simple!!
Le tutoriel est certes bien expliqué, mais une chose très importante n’est pas indiquée:comment importer dewplayer et les fichiers mp3 sur son serveur ftp (filezilla)??
Merci par avance,
bonne journée, et merci encore pour ce tuto!
bonjour,
j’ai deux problèmes:
1:J’ai un problème avec dewplayer version playlist, le player s’affiche correctement mais la playlist n’y est pas.
2:J’ai un problème car mon lecteur vidéo fonctionne sous internet explorer mais pas sur
mozilla. Si il y a une solution a se problème sa serait bien sinon bah tanpis.
Je s’ouhaite résoudre le 1 problème en priorité
alors s’il vous plais aidé moi.
les balises ont disparues.
oublier ce que j’ai dis j’ai réussis tout seul
juste si vous avez une solution pour jw player sur mozilla je veux bien.
Bonjour!.
Un très merci pour les codes fournis. J’a_ compris comment rédiger une playlist en xml.
C’est un vrai plaisir de voir que cela fonctionne!. ( pas du premier coup. trop d’erreurs de chemin!!.
Merci mille fois. F8cfs-
Pingback: Ajouter des musiques ou des vidéos sur son site gràce à Dewplayer et JWplayer | Codes Scripts Tutoriels
Juste un GRAND MERCIIIIIIIII pour ce tuto vidéo qui m’a beaucoup aidé à décortiquer Dewplayer et m’a permis de mettre ma playlist en ligne ! Merci Merci
Pingback: Ajouter les musiques ou des vidéos sur son site grâce à Dewplayer et JWplayer | CodesScripts.fr
HELP/HELP/HELP
bon super ton tuto rien a dire, bien expliquer.
une seul chose manque, et je cherche depuis des heures sans succée
explique moi, comme a un novice stp, car des fois j’ai un peut de mal a percuter, COMMENT FAIRE POUR QUE SE LECTEUR (le multi) NE SE REINISIALISE PAS A CHAQUE CHANGEMENT DE PAGE.
ps: si tu va voir mon site, tu verras pas le probleme avec le players, je veut regler se probleme avant de le renvoyer.
Bonjour,
C’est normal car la page se recharge et donc le player aussi.
Je vois 2 solutions : faire un site en utilisant des technologies comme AJAX (jquery et compagnie) afin de recharger seulement les parties qui bouge du site, par conséquent le player ne se relance pas. Néanmoins, c’est assez compliqué à mettre en place.
Soit utiliser les frames mais c’est pas très « jolie » http://www.commentcamarche.net/contents/html/htmlframes.php3
salut ! joli tuto je vx savoir est ce que si possible de faire un play liste ki lire le nom de fichier mp3 a partir de base donné mysql
bonjour,
Serait il possible de m’aider a comprendre comment ajouter simplement le bouton « next » pour jouer directement la vidéo suivante sans attendre la fin de celle en cours, suivant le modèle de page suivante :
http://www.arrah.net/player
Merci !
merci pour ce tutoriel , le seul qui donne exactement les infos nécéssaires sans embrouiller tout le monde ! Je désespérais d’y comprendre quelque chose, merci !
Merci pour ce super tutoriel. Je m’escrimais depuis plusieurs moi pour intégrer des fichiers mp3 avec dewplayer sur un site créé avec Kompoze … je n’y arrive toujours pas, mais ça progresse. Je vois le lecteur dewplayer en ligne mais avec le message XML error. Par contre, je n’arrive pas à le voir quand je travaille sur Kompozer sur mon ordi.
J’ai essayé d’être attentive au chemin : je ne vois pas d’où vient le problème …
http://ecolebrassenscleguer.nuxit.net/bingo/Passwords.html
Voici le lien.
Merci de me donner un coup de pouce.
ça marche !! Génial !! Merci.
Je suis allée sur plusieurs forums et je ne peux que vous félicitez pour la clarté de vos explications compréhensibles même pour des néophytes.
je trouve parfait ce tuto parce je voulais mettre des musiques et des videos sur mon site perso, ce tuto m’a beaucoup aidé merci