播放事件的绑定示例:
$(id).bind($.jPlayer.event.play, function(event) {
if (event.status.currentTime>0 && event.status.paused===false) {
}
});
同时也要检查:http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type
jPlayer下的MP3列表:
var srcvalue = "";
var songName = "";
function play(songId) {
srcvalue = $(songId).attr('src');
songName = $(songId).attr('title');
$(".jp-title ul li").text(songName);
$("#jquery_jplayer_1").jPlayer("setMedia", {
oga: srcvalue
}
).jPlayer("playHead", 0).jPlayer("play");
}
$(document).ready(function() {
srcvalue = $(".song:first-child").attr('src');
songName = $(".song:first-child").attr('title');
$(".jp-title ul li").text(songName);
$(".song").each(function() {
$(this).click(function() {
play($(this));
});
});
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
oga: srcvalue
});
},
supplied: "oga"
});
});
fiddle: http://jsfiddle.net/BerkerYuceer/JX2B3/
多个jPlayer实例:
html:
<div class="player" src="http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" title="Cro Magnon Man"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg" title="Tempered Song"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" title="Bubble"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg" title="Beside Me"></div>
<div class="player" src="http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg" title="Thin Ice"></div>
jQuery:
$(document).ready(function() {
var i = 0;
var srcvalue = "";
var songName = "";
$(".player").each(function(){
srcvalue = $(this).attr('src');
songName = $(this).attr('title');
$(this).after(
'<div id="jp_container_' + i + '" class="jp-audio">' +
'<div class="jp-type-single">' +
'<div class="jp-gui jp-interface">' +
'<ul class="jp-controls">' +
'<li> <a class="jp-play" tabindex="1" href="javascript:;">play</a> </li>' +
'<li> <a class="jp-pause" tabindex="1" href="javascript:;" style="display: none;">pause</a> </li>' +
'<li> <a class="jp-stop" tabindex="1" href="javascript:;">stop</a> </li>' +
'<li> <a class="jp-mute" title="mute" tabindex="1" href="javascript:;">mute</a> </li>' +
'<li> <a class="jp-unmute" title="unmute" tabindex="1" href="javascript:;" style="display: none;">unmute</a> </li>' +
'<li> <a class="jp-volume-max" title="max volume" tabindex="1" href="javascript:;">max volume</a> </li>' +
'</ul>' +
'<div class="jp-progress">' +
'<div class="jp-seek-bar" style="width: 100%;">' +
'<div class="jp-play-bar" style="width: 0%;"> </div>' +
'</div>' +
'</div>' +
'<div class="jp-volume-bar">' +
'<div class="jp-volume-bar-value" style="width: 80%;"></div>' +
'</div>' +
'<div class="jp-time-holder">' +
'<div class="jp-current-time">00:00</div>' +
'<div class="jp-duration">00:00</div>' +
'<ul class="jp-toggles">' +
'<li> <a class="jp-repeat" title="repeat" tabindex="1" href="javascript:;">repeat</a> </li>' +
'<li> <a class="jp-repeat-off" title="repeat off" tabindex="1" href="javascript:;" style="display: none;">repeat off</a> </li>' +
'</ul>' +
'</div>' +
'</div>' +
'<div class="jp-title">' +
'<ul>' +
'<li>' + songName + '</li>' +
'</ul>' +
'</div>' +
'<div class="jp-no-solution" style="display: none;">' +
'<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a target="_blank" href="http://get.adobe.com/flashplayer/">Flash plugin</a>.' +
'</div>' +
'</div>' +
'</div>');
$(this).jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", { oga: srcvalue });
},
play: function() {
$(this).jPlayer("pauseOthers");
$(this).jPlayer("playHead", 0);
},
ended: function() {
$(this).jPlayer("playHead", 0);
},
supplied: "oga",
cssSelectorAncestor: '#jp_container_' + i,
cssSelector: {
videoPlay: '.jp-video-play',
play: '.jp-play',
pause: '.jp-pause',
stop: '.jp-stop',
seekBar: '.jp-seek-bar',
playBar: '.jp-play-bar',
mute: '.jp-mute',
unmute: '.jp-unmute',
volumeBar: '.jp-volume-bar',
volumeBarValue: '.jp-volume-bar-value',
volumeMax: '.jp-volume-max',
currentTime: '.jp-current-time',
duration: '.jp-duration',
fullScreen: '.jp-full-screen',
restoreScreen: '.jp-restore-screen',
repeat: '.jp-repeat',
repeatOff: '.jp-repeat-off',
gui: '.jp-gui',
noSolution: '.jp-no-solution'
},
warningAlerts: false
});
i = i + 1;
});
});
fiddle: http://jsfiddle.net/BerkerYuceer/t9dZh/
(event.jPlayer.status.duration>0)
和(event.jPlayer.status.paused==false)
更长。 - Berker Yüceerevent.jPlayer.status.duration
呢?$("#myjplayer").event.jPlayer.status.duration
返回错误。。 - 0x49D1$.jPlayer.event.play
事件处理程序中,什么情况下event.status.paused
会是false
? - c24w