2012-11-06 45 views
7

क्या यह जांचना संभव है कि jPlayer अभी खेल रहा है या नहीं?
मेरे पास प्रति पेज कई खिलाड़ी हैं और मुझे वर्तमान में कौन सा जेप्लेयर चल रहा है, इस पर निर्भर करता है कि मुझे कुछ कक्षाएं बदलने की ज़रूरत है। मेरे लिए सबसे स्पष्ट जांच यह देखने के लिए है कि खिलाड़ी आईएम चेकिंग वर्तमान में राज्य खेल रहा है या नहीं।
documentation में ईवेंट खेलने के बारे में कुछ मिला, लेकिन इसका उपयोग कैसे नहीं किया जा सकता है। अब के लिए नमूना मैं निम्नलिखित और यह मेरा स्थिति में काम करता है, लेकिन अभी भी बेहतर समाधान जो खिलाड़ी जब बटन (जो नाटक समारोह निकाल दिया) क्लिक किया गया था खेल रहा है की जाँच करने के हो जाएगा:जांचें कि क्या 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. 
} 

उत्तर

5

उदाहरण बाध्यकारी खेलने घटना के लिए: http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type jPlayer साथ

एमपी 3 सूची:

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

भी के लिए जाँच

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

बेला: http://jsfiddle.net/BerkerYuceer/JX2B3/

एकाधिक jPlayer उदाहरण:

एचटीएमएल:

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

बेला: http://jsfiddle.net/BerkerYuceer/t9dZh/

+0

हम्म, अगर PLAYER1 अब खेल रहा है कुछ बटन पर क्लिक जाँच करने के लिए नहीं exactly..i जरूरत - वर्गों को 'smth' में बदलें- 'smth1' तक। – 0x49D1

+1

इसकी '(event.jPlayer.status.duration> 0)' और '(event.jPlayer.status.paused == झूठी) की तुलना में आपको जांच करनी चाहिए। –

+0

हां, ऐसा लगता है कि यह है .. और 'event.jPlayer.status.duration' कैसे प्राप्त करें? '$ (" # myjplayer ")। event.jPlayer.status.duration' रिटर्न त्रुटि .. – 0x49D1

2

या आप इस्तेमाल कर सकते हैं:

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

यह 1.0.0 से ऊपर के संस्करण के लिए काम नहीं कर रहा है (वहां जवाब दें http://stackoverflow.com/questions/9153788/jplayer-how-to-find-out-if-its-playing – Galbarad

3

आसान एक:

if($("#jquery_jplayer_1").data().jPlayer.status.paused == false){ 
    //Is Playing; 
} 
संबंधित मुद्दे