Контент сайта подгружать через AJAX, как в VK
Сайт делаем на ДЛЕ, будет 2 шаблона, нужно что бы музыка в переходах между шаблонами и по страницам сайтов продолжала играть. Спасибо.
P.S. Если не сложно, лучше сразу с примером как это реализовать, что бы при переходе по страницам музыка не прерывалась, или прерывалась ненадолго но начинала играть с того же места. А то везде пишут принцип реализации работы плеера ВКонтакте, но никто примеры не показывает. Спасибо.
Ну смотрите... Есть у кого-то пример, как подгружать через аякс один музыкальный трек, что бы можно было ему установить повтор, громкость и спрятать на фон? Без управления и без визуалки. Просто играет себе на фоне циклично при серфинге по сайту. Ну или с визуальной кнопочкой On/Off. Спасибо.
1 ответов
Именно контент, шапка/футер загрузились при открытии сайта и мы их не трогаем
Где то там же в шапка/футер у нас и плеер фигачит
2. Делаем чтоб работали кнопки браузера вперед/назад и при копирование урла открывалась таже страница
тут 2 варианта, а в идеале можно совместить:
- html5 history pushstate современные браузеры
- хеш навигация
вот неплохая попытка объединения jquery-pjax
В теории можно обойтись одним этим плагином
Первое, что приходить в голову, так это то, что фоновая музыка это зло вселенского масштаба.
Плеер же в VK работает через HTML 5 History ( Вот тут хороший пример )
То есть это работает только для браузеров его поддерживающих. Откройте VK через ie 7-8 и трек будет прерываться при переходе.
Единственный кроссбраузерный вариант это делать абсолютно всё через AJAX.
варианты:
1) У флеша есть Local Shared Objects — флеш куки. Тоесть в плеере можно сохронять текущую позицию проигрования и соответственно после перезагрузки - можно восстановить проигрывание с момента, на котором оборвалось проигрование. Но косяк - прерывание музыки между перезагрузок.
2) Использовать фреймы - вродебы идеально, и через js другово фрэйма можно управлять плеером. Но косяк при индексировании поисковой системы - возможно ваш сайт (страница основного фрейма сайта) - загрузиться без фреймовой структуры и соответственно без плеера. Однако можно при помощи js на основной странице - загружена ли страница в фрейме или отдельно - и переадрисовывать по необходимости.
3) Использовать ajax - что бы страница не перезагружал, однако столько надо сделать что по человечески всё работало, а частности история, прямые ссылки на ресурсы - что бы проект нормально индексировался, что бы работала адресная строка по средствам location.hash
Вообщем безболезненно не получиться прикрутить фоновой звук =)
Как вариант сделать основной div.content (ну или манипулировать body) и в него подгружать весь контент который Вам необходим.
Т.е. картина будет примерно следующая:
Страничка, имеющая такую структуру:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Моя крутая страница</title>
<!-- Тут подгружаем jQuery или другие библиотеки и пишем код для обработки кликов и работы с плеером -->
</head>
<body>
<!-- тут будет сам сайт ну и что нибуть для плеера :) -->
</body>
</html>
Полезные ссылки:
1. http://jquery.com/ - сайт jQuery
2. http://dojotoolkit.org/ - Dojo
3. http://htmlbook.ru - Все о HTML и CSS
4. http://www.jplayer.org/ - Ну и собсно плеер