hello tout le monde,
Voila mon soucis, j'ai deux players audio qui s'affichent en même temps et tout fonctionne bien (play,pause,volume...) mais ce que j'aimerai bien faire, c'est cacher ces deux players (jusque là ca va avec un display:none) et avoir deux liens, un pour le player 1 et un autre lien pour le player 2. Quand je clique sur le lien du player 1, celui-ci s'affiche et joue la musique. Quand je clique sur le lien du player 2, le player 1 se cache et normalement le player 2 s'affiche et joue la musique et c'est la que je coince.
HTML
[code]
<div class="example">
<p><a href="#" onClick="show_mp3('lecteur','play');">Play ici</a></p>
<div>
<div class="players" id="lecteur" style="display:none">
<h2>player 1</h2>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<span class="time-sep">/</span>
<div class="jp-duration"></div>
</div>
</div>
</div>
</div>
<p><a href="#" onClick="show_mp3('lecteur2');">Play2 ici</a></p>
<div class="players" id="lecteur2" style="display:none">
<h2>player 2</h2>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<span class="time-sep">/</span>
<div class="jp-duration"></div>
</div>
</div>
</div>
</div>
</div>
</div>
[/code]
JAVASCRIPT
[code]
function show_mp3(id,play = null) {
if(id == 'lecteur'){
document.getElementById('lecteur2').style.display = 'none';
document.getElementById(id).style.display = 'block';
}else if(id == 'lecteur2'){
document.getElementById('lecteur').style.display = 'none';
document.getElementById(id).style.display = 'block';
}
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
oga: "http://www.html5audio.me/audio/Chase-and-Status-Flashing-Lights.ogg",
}).jPlayer(play); // auto play
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "html",
supplied: "oga"
})
.bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
});
$("#jquery_jplayer_2").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
ogv: "http://www.devo.com/fabco/drinkinalone.ogg"
});
},
ended: function (event) {
$("#jquery_jplayer_2").jPlayer("play", 0);
},
swfPath: "html",
supplied: "m4v, ogv",
cssSelectorAncestor: "#jp_interface_2"
})
.bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
});
}
[/code]
Merci de votre aide :)