0

このチュートリアルから取得したオン/オフ ボタンをjPlayer ページに実装しました。

  • チュートリアルでわかるように、ボタンには押された状態と押されていない状態の 2 つの状態があります。
  • 変更した Player の jquery ファイルを使用して、ページにボタンを実装しました。

index.htmlに実装しようとすると、押された状態に変わりますが再生されません。jQuery内に実装すると、押された状態に変わりませんが再生されます。

これは私のコードですmetroplayer.js

$(document).ready(function(){
            $('#button').on('click', function(){
                $(this).toggleClass('on');
            });
        });

(function($){
    $.fn.extend({


        metroPlayer: function(options) {

            var defaults = {

            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                obj = $(this);
                o = options;

                $template = $('<div id="metro-wrapper">'+
                '<div id="metro-left-overlay"></div>'+
                '<div id="jp_container_N" class="">'+
                '<div id="jquery_jplayer_N" class="jp-jplayer"></div>'+
                '<div class="jp-gui">'+
                '<div class="jp-interface">'+
                '<div id="metro-left">'+
                '<div id="metro-controls">'+
                '<ul>'+
                //'<li id="metro-prev" class="jp-prev"><img src="img/prev.png" /></li>'+
                '<section><a id="button" class="onoffbutton jp-play" href="#">&#xF011;</a>'+
                '<span></span>'+
                '</section>'+

「押された」モードでボタンが表示されないようにするコードの何が問題になっていますか?

これは私のプレーヤーページです。

4

2 に答える 2

1

jPlayer( "play" );実際のクリックイベントを実装していません。あなたがやりたいことは

$('#button').on('click', function(){
    $(this).toggleClass('on');
    $musicPlayer.jPlayer({ //whatever json you want })("play");
});

またはそのようなもの。つまり、このイベント バインディングを にプレーヤーをセットアップした後に移動する必要が$musicPlayerあるため、必ず実行してください。

于 2013-01-22T23:25:12.147 に答える
1

ボタン要素に css クラスを追加するだけでは、jPlayer 要素は再生を開始しません。これをクリックイベント関数内に追加してみてください:

if( $(this).hasClass("on") ){
    $(yourplayerid).jPlayer( "play" );
} else {
    $(yourplayerid).jPlayer( "stop" );
}

ソース: http://www.jplayer.org/latest/developer-guide/#jPlayer-play

于 2013-01-22T23:11:22.563 に答える