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 ».

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>https://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>https://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>https://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>https://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 !

45 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. VVVV

    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!
    MERCI!

  2. bala

    Bonjour
    j’ai réussi en suivant le tuto a placer des player mp3.
    Je souhaite mettre le JWPlayer sur mon site pour les clip vidéo, mais dans le fichier « mediaplayer-5.10-viral », il n’y a pas les trois dossiers que tu demande de placer dans « vidéo » il y a que « player.swf » et « jwplayer.js »
    Es-que ces parce que ces la new version de JWplayer, ces une autre méthode pour le placer.
    peut tu m’aider

  3. céline

    Bonjour,
    J’ai un petit problème avec ma playlist, (c’est pour de la musique).
    Le height de chaque ligne (de la playlist) est 2 fois trop grande.
    Je n’ai pas réussit à trouver le paramètre qui permet de modifier.

    Est ce que quelqu’un le connait ?
    Merci par avance.

    Céline