Kann überprüft werden, ob jPlayer gerade abgespielt wird? Ich habe mehrere Spieler pro Seite und muss einige Klassen ändern, je nachdem, welcher jPlayer gerade spielt. Die naheliegendste Prüfung für mich ist, ob sich der Spieler, den ich überprüfe, gerade im Spielzustand befindet. Ich habe in der Dokumentation etwas über das Spielereignis gefunden, weiß aber nicht, wie ich es verwenden soll es.

Im Moment habe ich Folgendes, und dies funktioniert in meiner Situation, aber eine bessere Lösung wäre zu überprüfen, welcher Spieler spielt, wenn auf die Schaltfläche (die die Wiedergabefunktion ausgelöst hat) geklickt wurde:

// 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.
} 
7
0x49D1 6 Nov. 2012 im 17:11

3 Antworten

Beste Antwort

Beispielbindung für ein Spielereignis:

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

Überprüfen Sie auch Folgendes: http://www.jplayer.org/latest/ Entwicklerhandbuch / # jPlayer-Ereignistyp

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

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

Mehrere jPlayer-Instanzen:

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

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

5
Berker Yüceer 12 Nov. 2012 im 07:15

Einfaches:

if($("#jquery_jplayer_1").data().jPlayer.status.paused == false){
    //Is Playing;
}
3
Reza Mamun 2 Juli 2015 im 22:01

Oder Sie könnten verwenden:

if($("#priPlayerID").jPlayer("getData","diag.isPlaying") == true){
    //Is Playing
}
2
keji 30 Aug. 2013 im 01:29