7

jPlayerが現在再生されているかどうかを確認することはできますか? ページごとに複数のプレーヤーがあり、現在再生中の jPlayer に応じていくつかのクラスを変更する必要があります。私にとって最も明白なチェックは、チェックしているプレーヤーが現在プレイ状態にあるかどうかを確認することです。ドキュメントでPlaying イベントに関する何かを見つけましたが、その使用方法がわかりません。

今のところ、私は次のようにしています。これは私の状況では機能しますが、より良い解決策は、ボタン (再生機能を起動した) がクリックされたときにどのプレーヤーが再生されているかを確認することです。

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

play イベントのバインディングの例:

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

フィドル: http://jsfiddle.net/BerkerYuceer/JX2B3/

複数の 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;
    });
});

フィドル: http://jsfiddle.net/BerkerYuceer/t9dZh/

于 2012-11-06T13:31:15.400 に答える
3

簡単なもの：

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