JPlayer, un audio-vidéo player en javascript, avec playlist .
Le voici ci-dessous, dans sa version un peu plus "habillée", avec des pièces de musique MP3, libres de droits, issues de Dogmazic. Et deux clips en "stop motion" empruntés sur Youtube pour la démonstration...(mais hébergés sur le site). Merci aux créateurs (JsauceTV et Matthew Burnham-Jones).
Le principe est strictement le même que dans l'article précédent. Il y a cependant des images à ajouter (poster dans la terminologie de JPlayer). Ici elles ont comme dimension 640x360px et sont rangées dans un dossier poster situé dans mon dossier file/List où sont rangées les pièces de musique. Les deux clips sont dans un autre dossier de file car ils servent déjà à une autre démonstration. Mais il suffit d'adapter les liens.
Deux intégrations dans le code source :
¤ La première obligatoirement au début du code source (adaptations à faire sur les textes marron, les parties à modifier, adapter, compléter..., respectez le chemin des fichiers que vous placez dans la liste - pièces de musique, poster- ainsi que le chemin de la skin - ici file/JPlayer/css/jplayer.dark.monday.css )
et, pour les pistes, ajouter ou retirer une ou plusieurs séries complètes de
{
title:"...",
...
},
en cas de nécessité. Les formats supportés sont plus nombreux... reportez-vous à la documentation des sites d'origine.
<link href="../file/JPlayer/css/jplayer.dark.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../file/JPlayer/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="../file/JPlayer/js/jplayer.playlist.js">
</script><script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Que sommes nous en train de faire ?",
artist:"[Dogbreath]",
mp3:"file/List/Que_sommes_nous_en_train_de_faire.mp3",
poster: "file/List/poster/LaMarge.jpg"
},
{
title:"Suonos für monkey's corones",
artist:"[Dogbreath]",
mp3:"file/List/Suonos_fur_monkey_s_corones.mp3",
poster: "file/List/poster/Suonos.jpg"
},
{
title:"La grande peste de 1348",
artist:"Phat",
mp3:"file/List/La_grande_peste_de_1348.mp3",
poster: "file/List/poster/LaGrandePeste.jpg"
},
{
title:"What cool",
artist:"Tom la mèche",
mp3:"file/List/What_cool.mp3",
poster: "file/List/poster/Voyageur.jpg"
},
{
title:"Jazz urban",
artist:"Les Oreilles en ballade",
mp3:"file/List/Jazz_urban.mp3",
poster: "file/List/poster/Sandwich.jpg"
},
{
title:"Lego BMX",
artist:"JsauceTV",
webmv:"file/video-camera/lego-bmx-vid.webm",
poster: "file/List/poster/lego-bmx.jpg"
},
{
title:"The impatient Granny",
artist:"Matthew Burnham-Jones",
webmv:"file/video-camera/the-impatient-granny-vid.webm",
poster: "file/List/poster/the-impatient-granny.jpg"
},
], {
supplied: "webmv, mp3",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true
});
});
//]]>
</script>
¤ La seconde, là où vous souhaitez, dans la page, la boite libre... installer ce lecteur... Évidemment, il faut que les id soient les mêmes que ci-dessus.
<div aria-label="media player" class="jp-video jp-video-270p" id="jp_container_1" role="application">
<div class="jp-type-playlist">
<div class="jp-player" id="jquery_jplayer_1"></div>
<div class="jp-gui">
<div class="jp-video-play">
<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div aria-label="time" class="jp-current-time" role="timer"></div>
<div aria-label="duration" class="jp-duration" role="timer"></div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-next" role="button" tabindex="0">next</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
</div>
</div>
<div class="jp-details">
<div aria-label="title" class="jp-title"></div>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
Et c'est tout...
Dans l'article suivant, aux prix de quelques modifications, un player vidéo de vidéo embed issues de Youtube.
Pour toute question ou aide pour utiliser ce dispositif, veuillez poster sur le forum de ce site (rubrique "En vrac").
© 2004-2020 
