JQuery Jplayer Cookie предпочтения - PullRequest
       1

JQuery Jplayer Cookie предпочтения

0 голосов
/ 03 сентября 2010

Хорошо, у меня есть этот довольно крутой медиаплеер на тему Марио, созданный с помощью настройки чрезвычайно мощного плагина jQuery, jplayer .

Итак, я хотел бы датьпользователь может выбрать, будет ли он или она автоматически воспроизводить музыку в фоновом режиме на веб-сайте.

По умолчанию он отключен, так как предполагается, что это бизнес, и дажедля обычных некоммерческих сайтов музыка в фоновом режиме может вызывать очень раздражение, особенно если неясно, как запускать и останавливать звук.

В любом случае, я пытаюсь установитьсоздать cookie для этого, используя интуитивно понятный плагин cookie jQuery .

Вот код, который я устанавливаю при нажатии кнопок в модальном диалоговом окне:

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

});
-->

Кажется, все еще есть та же проблема .. Я пытаюсь решить ее, но если вы обнаружите ошибку раньше, чем я, пожалуйста, дайте мне знать!:)

1 Ответ

1 голос
/ 03 сентября 2010

Вам нужно сравнить со строкой, например:

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

Также, даже если вы проверяете yes, вы все равно передаете false, похоже, что это должно быть true.

И я увеличил бы интервал, по крайней мере, на 50 мс, например:

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

В общем, не проверяйте cookieна каком-либо интервале, сделайте все, что выполняет действие, и установите cookie, и выполните действие ... только используйте cookie при первой настройке проигрывателя в document.ready.

...