+7 (812)-425-62-13
Блог
07.12.2018
Для сайта одного из наших клиентов стояла задача реализовать механизм беспрерывного воспроизведения музыки при переходе по страницам. Для этого было принято решение сделать работу сайта посредством технологии ajax. В качестве плеера выбрали jplayer плеер работающий на jQuery.
Так же нам потребуется плагин jQueryCookie для того чтобы при последующем заходе на сайт запоминались настройки воспроизведения. Перейдем от слов к практике.
Для начала в шапке сайта нам необходимо инициализировать скрипты плагинов.
Разметку в верстке производим, btnPlay - кнопка Play, btnPause - кнопка Пауза и jplayer - сам плеер.
Так же нам потребуется плагин jQueryCookie для того чтобы при последующем заходе на сайт запоминались настройки воспроизведения. Перейдем от слов к практике.
Для начала в шапке сайта нам необходимо инициализировать скрипты плагинов.
<script type="text/javascript" src="/bitrix/templates/.default/js/jquery.cookie.js"></script> <script type="text/javascript" src="/bitrix/templates/.default/js/jquery.jplayer.2.1.0/jquery.jplayer.min.js"></script> <script type="text/javascript" src="/bitrix/templates/.default/js/jquery.cookie.js"></script>
Разметку в верстке производим, btnPlay - кнопка Play, btnPause - кнопка Пауза и jplayer - сам плеер.
<span id="btnPlay" class="icon9px play-btn" >Play</span> <span id="btnPause" class="icon9px pause-btn">Stop</span> <div id="jplayer"></div>Далее производим настройки плагина указываем путь к файлу воспроизведения и путь к папке с библиотекой, где у нас находится сам swf плеер внутри плагина данный плеер носит название Jplayer.swf
var init_options = { sound_url: "/music.mp3", sound_swfPath: "http://site.ru/jsplayer" }Осталось инициализировать сам плагин с нашим плеером для этого воспользуемся следующим кодом:
$("#jplayer").jPlayer({ supplied:"mp3", swfPath: init_options.sound_swfPath, volume:0.1, ready:function(){ if(typeof $.cookie('music_state') == 'undefined') $.cookie('music_state','play',{ expires: 30 }); // при новом отрытии страницы,идет проверка куков на режим воспроизведения if($.cookie('music_state') == 'play'){ $('#btnPlay').hide();// скрыть кнопку стоп $('#btnPause').show(); //показать кнопку пауза $(this).jPlayer("setMedia", { mp3: init_options.sound_url }).jPlayer("play"); } else{ $('#btnPlay').show(); $('#btnPause').hide(); $(this).jPlayer("setMedia", { mp3: init_options.sound_url }); } $('#btnPlay').click(function(){ $("#jplayer").jPlayer("play"); $.cookie('music_state','play',{ expires: 30 }); }); $('#btnPause').click(function(){ $("#jplayer").jPlayer("pause"); $.cookie('music_state','pause',{ expires: 30 }); }); }, ended: function (event) { $(this).jPlayer("play"); } });Посмотреть реализвацию вы можете посмотреть на сайте нашего клиента http://leylauluhanli.com/ .
2008
Верстка