2010-09-03 71 views
0

好的,所以我有這個非常酷的Mario主題媒體播放器,由極其強大的jQuery插件jplayer的定製創建。jquery jplayer cookie首選項

所以,我想給用戶選擇他或她是否想在網站的後臺自動啓動音樂播放。

我有它默認關閉的,因爲這應該是一個企業,甚至是定期的,非盈利的網站,在背景音樂可以非常刺激性,尤其是如果它不清楚如何啓動和停止音頻。

無論如何,我試圖設置一個cookie來做到這一點,使用直觀的jQuery cookie plugin

下面是代碼我設置被點擊的模式對話框的按鈕時:

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

現在,我正在一個蒂莫,這是檢查每毫秒(是的,這很容易被調整,但我只是想即時結果),用於將autoPlay cookie的值,無論是yes或no!

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. 
    } 

所以,出於某種原因,當我刷新頁面,之後選擇沒錯。播放器不會自動播放。現在,我認爲這個問題可能是我的條件陳述的原因。但我不知道..

UPDATE:

這裏是我的整個新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 }); 
      } 
     } 
    }); 

}); 
--> 

它似乎仍然有同樣的問題..我試圖解決它,但如果您在我之前發現錯誤,請讓我知道! :)

回答

1

,則需要比較到一個字符串,像這樣:

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

即使你檢查yes,你仍然傳遞false另外,現在看來似乎應該是true

了間隔50毫秒,至少,這樣的整體:

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

雖然在一般,也不是檢查在間隔一個cookie在所有,作出力所能及的執行效能的動作既設置cookie,然後執行操作...僅當使用 cookie時,首次在document.ready中設置播放器。

+0

感謝您的幫助,但目前我仍然遇到同樣的問題。 查看我在更新中發佈的新代碼。我只是嘗試cookie的方式,直到我可以得到它的工作,只是因爲它應該工作imo .. – Qcom 2010-09-03 14:51:34