Örnek bağlayıcı oyun etkinlik için: JPlayer ile http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type
MP3 listesinde:
$(id).bind($.jPlayer.event.play, function(event) {
if (event.status.currentTime>0 && event.status.paused===false) {
// Its playing right now
}
});
da kontrol
var srcvalue = "";
var songName = "";
function play(songId) {
srcvalue = $(songId).attr('src');
songName = $(songId).attr('title');
// Show the new song's title
$(".jp-title ul li").text(songName);
// Then add the new song
$("#jquery_jplayer_1").jPlayer("setMedia", {
oga: srcvalue
}
// Play from the begining
).jPlayer("playHead", 0).jPlayer("play");
}
$(document).ready(function() {
// Get first song
srcvalue = $(".song:first-child").attr('src');
songName = $(".song:first-child").attr('title');
// Then show the first song's title
$(".jp-title ul li").text(songName);
// Bind click event to playlist
$(".song").each(function() {
$(this).click(function() {
play($(this));
});
});
// Starting value
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
oga: srcvalue
});
},
supplied: "oga"
});
});
keman: http://jsfiddle.net/BerkerYuceer/JX2B3/
Çoklu JPlayer örneği:
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 = "";
// For each player
$(".player").each(function(){
srcvalue = $(this).attr('src');
songName = $(this).attr('title');
// Add html elements
$(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({ // Create player
// The $.jPlayer.event.ready event
ready: function(event) {
// Set media
$(this).jPlayer("setMedia", { oga: srcvalue });
},
/* This is the playing state and if im not mistaken
* you were looking for this.
* playing: function() { },
* pause: function() { },
*/
// On each play disable others
play: function() {
// Pause all except this one
$(this).jPlayer("pauseOthers");
/* This means start from 0
* when used in play even after pause event
* it will start from begining
*/
$(this).jPlayer("playHead", 0);
},
// The $.jPlayer.event.ended event
ended: function() {
// Repeat the media
$(this).jPlayer("playHead", 0);
},
// Supplied MIME types
supplied: "oga",
// Css Ancestor
cssSelectorAncestor: '#jp_container_' + i,
// Css Selector
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'
},
// Warning Alerts
warningAlerts: false
});
i = i + 1;
});
});
keman: http://jsfiddle.net/BerkerYuceer/t9dZh/
hmm player1 şimdi oynuyor eğer bazı düğmesi tıklandığında kontrol etmek değil exactly..i ihtiyaç - sınıfları 'smth' else '-to' smth1 'olarak değiştirin. – 0x49D1
, onun (event.jPlayer.status.duration> 0) 've' (event.jPlayer.status.paused == false) 'dan daha fazla kontrol etmelisiniz. –
evet, öyle görünüyor ki .. Ve bu 'event.jPlayer.status.duration' nasıl elde edilir? '$ (" # myjplayer "). event.jPlayer.status.duration' hata döndürür .. – 0x49D1