7

是否可以检查jPlayer是否正在播放？我每页有几个播放器，我需要更改一些类，具体取决于当前正在播放的 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.
}
4

3 回答 3

5

播放事件的示例绑定：

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

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

带有 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/

Multiple jPlayer instance:

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

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

于 2012-11-06T13:31:15.400 回答
3

Easy one:

if($("#jquery_jplayer_1").data().jPlayer.status.paused == false){
    //Is Playing;
}
于 2015-07-02T22:01:33.827 回答
2

Or you could use:

if($("#priPlayerID").jPlayer("getData","diag.isPlaying") == true){
    //Is Playing
}
于 2013-08-30T01:29:16.497 回答