javascript 检查 jPlayer 是否正在播放

Check if jPlayer is playing

提问by 0x49D1

Is it possible to check if jPlayeris playing right now? I have several players per page and I need to change some classes, depending on which jPlayer is currently playing. The most obvious check for me is to see if the player I'm checking is currently in playing state. I found something about the playing event in the documentation, but don't get how to use it.

是否可以检查jPlayer现在是否正在播放？我每页有几个播放器，我需要更改一些类，具体取决于当前正在播放的 jPlayer。对我来说最明显的检查是查看我正在检查的玩家当前是否处于播放状态。我在文档中找到了一些关于播放事件的信息，但不知道如何使用它。

For now I have the following, and this works in my situation, but a better solution would be to check which player is playing when the button (which fired the play function) was clicked:

现在我有以下内容，这适用于我的情况，但更好的解决方案是检查单击按钮（触发播放功能）时正在播放的播放器：

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

采纳答案by Berker Yüceer

Example binding for play event:

播放事件的示例绑定：

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

also check for : http://www.jplayer.org/latest/developer-guide/#jPlayer-event-type

还要检查：http: //www.jplayer.org/latest/developer-guide/#jPlayer-event-type

MP3 list with jPlayer:

带有 jPlayer 的 MP3 列表：

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

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

小提琴：http: //jsfiddle.net/BerkerYuceer/JX2B3/

Multiple jPlayer instance:

多个 jPlayer 实例：

html:

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:

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

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

小提琴：http: //jsfiddle.net/BerkerYuceer/t9dZh/

回答by Reza Mamun

Easy one:

简单一：

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

回答by keji

Or you could use:

或者你可以使用：

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