2012-11-06 39 views
7

jPlayer'un şu anda oynayıp oynamadığını kontrol etmek mümkün mü?
Her sayfada birkaç oyuncu var ve hangi jPlayer'ın çalmakta olduğuna bağlı olarak bazı sınıfları değiştirmem gerekiyor. Benim için en belirgin kontrol, oyuncunun kontrolünün şu anda oyunda olup olmadığını görmek.
documentation numaralı oyun etkinliğiyle ilgili bir şeyler buldum ama nasıl kullanamayacağınızı öğrenemiyoruz. Şimdilik Örnek Aşağıdaki ve bu benim durumda çalışır, ancak yine de iyi bir çözüm (çalma işlevini ateş) butonu tıklandığında oynuyor hangi oyuncu kontrol etmek olurdu vardır:jplayer'ın çalınıp oynamadığını kontrol edin

// Shows in what player the song is currently playing. 
var currentSongId; 

function play(songId) { 
    $(".playing").removeClass("playing"); 
    $(".stop").removeClass("stop").addClass("play"); 
    // If some song is playing-stop it and resets current song so that on next play-it starts playing again 
    if (songId == currentSongId) { 
     currentSongId = null; 
     return; 
    } 
    // some other logic where I set currentSongId1 or 2, depending on what player's play is fired. 
} 

cevap

5

Ö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/

+0

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

+1

, onun (event.jPlayer.status.duration> 0) 've' (event.jPlayer.status.paused == false) 'dan daha fazla kontrol etmelisiniz. –

+0

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

2

Yoksa kullanabilirsiniz:

if($("#priPlayerID").jPlayer("getData","diag.isPlaying") == true){ 
    //Is Playing 
} 
+0

, yukarıdaki 1.0.0 sürümü için çalışmıyor (orada http://stackoverflow.com/questions/9153788/jplayer-how-to-find-out-if-its-playing – Galbarad

3

Kolay bir:

if($("#jquery_jplayer_1").data().jPlayer.status.paused == false){ 
    //Is Playing; 
}