0

好的,所以我有了这个非常酷的以马里奥为主题的媒体播放器,它是由功能非常强大的 jQuery 插件jplayer的定制创建的。

所以,我想给用户选项来选择他或她是否想在网站的背景中自动播放音乐。

我默认将其关闭,因为这应该是一项业务,即使对于常规的非营利性网站,背景音乐也可能非常烦人,尤其是在不清楚如何启动和停止音频的情况下。

无论如何,我正在尝试使用直观的jQuery cookie 插件来设置一个 cookie 。

这是我在单击模式对话框中的按钮时设置的代码:

 buttons: {
  'Without Music': function() {
   $(this).dialog('close');
   $.cookie('autoPlay', 'no', { expires: 365 * 10 });
  },
  'With Music': function() {
   $(this).dialog('close');
   $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
  }
 }

现在,我正在运行一个计时器,它每毫秒检查一次(是的,这可以很容易地调整,但我只想要即时结果!)自动播放 cookie 的值,无论是或否:

 setInterval(function() {
  if ($.cookie('autoPlay') == no) {
   displayPlayList();
   playListInit(false); // Parameter is a boolean for autoplay.
  }
 }, 1); // checks every millisecond (i.e. 1/1000 of a second)
  // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible
 setInterval(function() {
  if ($.cookie('autoPlay') == yes) {
   displayPlayList();
   playListInit(false); // Parameter is a boolean for autoplay.
  }

所以,出于某种原因,当我刷新页面时,选择是后。播放器不会像它应该的那样自动播放。现在,我认为问题可能是我的条件语句的原因。但我不确定..

更新:

这是我的整个新 jplayer.js 文件,其中包括我们需要为这个问题处理的代码:

$(document).ready(function(){

    $("#jpId").jPlayer( {
      swfPath: "/js"
    });

    var playItem = 0;

    var myPlayList = [
       {name:"SMB Overworld",mp3:"/audio/MushroomKingdomSMB.mp3"}, 
       {name:"SMB Underworld",mp3:"/audio/UnderworldSMB.mp3"}, 
       {name:"SMB Underwater",mp3:"/audio/UnderwaterSMB.mp3"}, 
       {name:"SMW Castle",mp3:"/audio/CastleSMW.mp3"} 
    ];

    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");

    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListInit(false); // Parameter is a boolean for autoplay.
        }
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        playListNext();
    });

    $("#jplayer_previous").click( function() {
        playListPrev();
        $(this).blur();
        return false;
    });

    $("#jplayer_next").click( function() {
        playListNext();
        $(this).blur();
        return false;
    });

    function displayPlayList() {
        $("#jplayer_playlist ul").empty();
        for (i=0; i < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>";
            listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>";
            $("#jplayer_playlist ul").append(listItem);
            $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
                var index = $(this).data("index");
                if (playItem != index) {
                    playListChange( index );
                } else {
                    $("#jquery_jplayer").jPlayer("play");
                }
                $(this).blur();
                return false;
            });
        }
    }

    function playListInit(autoplay) {
        if(autoplay) {
            playListChange( playItem );
        } else {
            playListConfig( playItem );
        }
    }

    function playListConfig( index ) {
        $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
        $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
        playItem = index;
        $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
    }

    function playListChange( index ) {
        playListConfig( index );
        $("#jquery_jplayer").jPlayer("play");
    }

    function playListNext() {
        var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
        playListChange( index );
    }

    function playListPrev() {
        var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
        playListChange( index );
    }
    $('#text_music').click(function() {
        $('#jplayer').slideToggle(500);
    });

    $("#player").bind( "clickoutside", function(event){
        if($('#jplayer').is(':visible')) {
            $('#jplayer').slideToggle(500);
        }
    });

    setInterval(function() {

      if($('a#jplayer_playlist_item_0').hasClass('jplayer_playlist_current')) {
       $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_1, #bg_2, #map_2, #sprites_2").show();
      };

      if($('a#jplayer_playlist_item_1').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_5, #bg_6, #map_6, #sprites_6, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_3, #bg_4, #map_4, #sprites_4, #platforms_4").show();
      };

      if($('a#jplayer_playlist_item_2').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").hide();
       $("#bg_5, #bg_6, #map_6, #sprites_6").show();
      };

      if($('a#jplayer_playlist_item_3').hasClass('jplayer_playlist_current')) {
       $("#bg_1, #bg_2, #map_2, #sprites_2, #bg_3, #bg_4, #map_4, #sprites_4, #platforms_4, #bg_5, #bg_6, #map_6, #sprites_6").hide();
       $("#bg_7, #bg_8, #map_8, #sprites_8, #behindsprites_8").show();
      };
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
           // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible

    setInterval(function() {
        if ($.cookie('autoPlay') === 'no') {
            displayPlayList();
            playListInit(false); // Parameter is a boolean for autoplay.
        }
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
        // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible
    setInterval(function() {
        if ($.cookie('autoPlay') === 'yes') {
            displayPlayList();
            playListInit(true); // Parameter is a boolean for autoplay.
        }
    }, 1); // checks every millisecond (i.e. 1/1000 of a second)
        // need to do speed tests, and see if fast checking results in bogged down pages, difference between 1 millisecond and even 100-300 are nearly negligible       
    /*
    $('#jquery_jplayer')
    playListInit(true)
    */
    $('#infobutton').click(function() {
        $('#music_descrip').dialog('open');
}   );
    $('#music_descrip').dialog({
        title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',
        autoOpen: false,
        height: 375,
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            'Without Music': function() {
                $(this).dialog('close');
                $.cookie('autoPlay', 'no', { expires: 365 * 10 });
            },
            'With Music': function() {
                $(this).dialog('close');
                $.cookie('autoPlay', 'yes', { expires: 365 * 10 });
            }
        }
    });

});
-->

它似乎仍然有同样的问题.. 我正在努力解决它,但如果您在我之前发现错误,请告诉我!:)

4

1 回答 1

1

您需要与字符串进行比较,如下所示:

 if ($.cookie('autoPlay') == 'yes') {

此外,即使您正在检查yes,您仍然通过false,看起来应该是这样true

增加间隔,至少 50 毫秒,总体上是这样的:

setInterval(function() {
  displayPlayList();
  playListInit($.cookie('autoPlay') === 'yes');
}, 1);

不过,一般来说,根本不要每隔一段时间检查 cookie,让执行操作的任何东西都设置 cookie 并执行操作...仅在第一次设置播放器时使用document.readycookie 。

于 2010-09-03T12:55:50.600 回答