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>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 !