2012-11-06 17 views
7

Czy jest możliwe sprawdzenie, czy obecnie odtwarzana jest gra jPlayer?
Mam kilku graczy na stronie i muszę zmienić niektóre klasy, w zależności od tego, w której grze jPlayer aktualnie gra. Najbardziej oczywistym sprawdzianem dla mnie jest sprawdzenie, czy odtwarzacz im sprawdza jest aktualnie w stanie gry.
Znaleziono coś na temat grania w wydarzeniu w numerze documentation, ale nie można uzyskać informacji, jak go użyć. próbek do teraz mam następujące i działa to w mojej sytuacji, ale jeszcze lepszym rozwiązaniem byłoby, aby sprawdzić, które toczy się gra, gdy przycisk (który zwolniony z funkcji odtwarzania) został kliknięty:Sprawdź, czy gra jplayer

// 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. 
} 

Odpowiedz

5

Przykład wiązania na razie Play:

$(id).bind($.jPlayer.event.play, function(event) { 
    if (event.status.currentTime>0 && event.status.paused===false) { 
     // Its playing right now 
    } 
}); 

również sprawdzić: http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type

listy MP3 z JPlayer:

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" 
    }); 
}); 

skrzypce: http://jsfiddle.net/BerkerYuceer/JX2B3/

Wielokrotne wystąpienie 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 = ""; 
    // 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; 
    }); 
}); 

skrzypce: http://jsfiddle.net/BerkerYuceer/t9dZh/

+0

hmm, nie exactly..i trzeba sprawdzić na jakimś kliknięcia przycisku jeśli Gracz1 gra teraz - zmień klasy na "smth" else -to "smth1". – 0x49D1

+1

niż jego '(event.jPlayer.status.duration> 0)' i '(event.jPlayer.status.paused == false)' powinieneś sprawdzić. –

+0

tak, wydaje się, że to jest to ... A jak uzyskać 'event.jPlayer.status.duration'? '$ (" # myjplayer "). event.jPlayer.status.duration' zwraca błąd. – 0x49D1

2

Albo można użyć:

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

to nie działa dla wersji powyżej 1.0.0 (odpowiedź: http://stackoverflow.com/questions/9153788/jplayer-how-to-find-out-if-its-playing – Galbarad

3

Łatwy jeden:

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