Идеальное решение для бесперебойного воспроизведения музыки при загрузке страницы? Использование javascript для загрузки страниц

Я занимаюсь разработкой музыкального онлайн-журнала. У нас есть музыкальный проигрыватель html5/flash, и он составляет основную часть веб-сайта. Но на сайте также есть много статей и прочего. Итак, в основном, я хочу бесшовное воспроизведение музыки при загрузке страницы, но я также хочу избежать полного приложения javascript, потому что я хочу, чтобы весь контент был удобен для пауков и индексировался в Google.

Я использую API истории html5 с резервным хэш-бангом (#!) для загрузки различного контента на главной странице при кликах. И загруженные URL-адреса также указывают на страницы с контентом.

Например: ссылка munimkazia.com/page1.html на моей индексной странице munimkazia.com загрузит содержимое страницы page1.html и вставит его. URL изменится на munimkazia.com/#!/page1.html в firefox и IE и на munimkazia.com/page1.html в chrome. ссылку и получить содержимое. У меня правильно настроена страница page1.html, готовая к просмотру. Но сейчас у меня проблемы.

Если я решу использовать загрузку ajax на этой странице, URL-адреса, отображаемые в адресной строке браузера, не будут соответствовать резервному варианту hashbang (http://munimkazia.com/page1.html/#!/page2.html). Если я решу перенаправить все клики на главную страницу контейнера по адресу http://munimkazia.com и загрузить page2.html, все будет работать нормально после этого, но эта загрузка страницы прервет воспроизведение музыки перед ней, если таковая имеется.

Кроме того, я не хочу переписывать все http://munimkazia.com/page1.html на http://munimkazia.com/#!/page1.html, потому что мне нужен весь контент присутствовать, а не извлекаться и записываться javascript для пауков поисковых систем для чтения. Я знаю, что у Google есть спецификация для чтения контента из #! URL-адреса, но я хочу, чтобы страница загружалась с содержимым статьи для пользователя, даже если JS отключен

Любые идеи/советы/обходные пути?

Изменить: эти URL-адреса являются просто примерами, объясняющими мою точку зрения. На munimkazia.com нет кода javascript для загрузки страниц.


javascript html browser-history html5-audio background-music
person Munim    schedule 16.02.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хэш-бах #! URL может быть проиндексирован Google, в этом весь их смысл, иначе люди просто использовали бы хеш # сам по себе.

Я думаю, что идея в том, что Google видит #! URL и преобразует его в параметр строки запроса, например. example.com/#!/products/123/ipod-nano-32gb становится example.com/?_escaped_fragment_=/products/123/ipod-nano-32gb, но пользователи по-прежнему используют хэш-банг URL. Вы программируете сервер на ответ на параметр ?_escaped_fragment_, но пользователь JavaScript перенаправляется на правильный #! URL.

Ознакомьтесь со спецификацией Google здесь http://code.google.com/web/ajaxcrawling/docs/getting-started.html

Я не думаю, что это хорошая идея использовать оба типа URL-адресов, так как у вас будет два URL-адреса, публикуемые пользователями в блогах, Twitter и т. д. для одной и той же страницы, также было бы кошмаром писать код для их обработки. надежно. Вам, вероятно, придется довольствоваться хэш-бэнгами, пока HTML5 History API не получит более широкую поддержку.

person Sunday Ironfoot    schedule 16.02.2011
comment
Я думаю, что это хорошая идея использовать оба, потому что обычные URL-адреса, которые можно использовать с API истории, намного лучше. Вы можете использовать каноническую ссылку, чтобы помочь Google понять, что оба URL-адреса указывают на один и тот же контент. - person Bart van Heukelom; 16.02.2011
comment
Справедливое замечание, но моя проблема в том, что пользователи Chrome/Safari будут публиковать ссылки /products/123/ipod-nano, а пользователи FF и IE - /#!/products/123/ipod-nano. Но если вы сможете обойти проблемы канонизации URL-адресов, а безумный архитектурный код должен это поддерживать, тогда, возможно, это сработает. Однако такие сайты, как Twitter и Facebook, решили не заморачиваться, и мне интересно, почему? - person Sunday Ironfoot; 16.02.2011
comment
Я знаю о спецификации сканирования Google ajax, и я думал об этом как о последнем средстве, потому что ни одна другая поисковая система не поддерживает эту спецификацию. Кроме того, facebook использует History API. Попробуйте открыть фотографию из новостной ленты в Chrome, и URL-адрес вашего браузера изменится на photo.php. В firefox добавляется #!, но в chrome используется API истории. Дать ему шанс :) - person Munim; 16.02.2011
comment
Я только что вспомнил еще одну главную проблему, о которой я думал, когда думал о единственном #! подход. Если я решу перенаправить все munimkazia.com/page1.html на munimkazia.com/#!/page1.html для загрузки основного контейнера и загрузки страницы по ajax, все будет терпеть неудачу, если JS отключен. Я по крайней мере хочу, чтобы страница загружалась со статьей, если JS отключен - person Munim; 16.02.2011
comment
Если вы просто собираетесь получить Google и др. чтобы сканировать обычные URL-адреса, вам не нужны URL-адреса с решеткой, просто используйте решетку #, потому что Google видит #! и попытается сделать escaped_fragment, что другие поисковые системы не поддерживают, как вы говорите. Я не говорил, что использовать оба подхода невозможно, просто очень сложно, но удачи. Возможно, я бы подошёл к этому прогрессивно, усовершенствованным способом, создав обычный сайт с обычными URL-адресами, которые выполняют обычные запросы GET, добавил бы поддержку History.pushstate, постепенно добавлял поддержку фрагментов # и т. д. - person Sunday Ironfoot; 16.02.2011
comment
Ага. На самом деле, у нас уже есть музыкальный онлайн-журнал, который я сейчас обновляю. Я начал реализовывать свой подход, и пока все выглядит довольно хорошо. Что касается моего первоначального вопроса, я думаю перезагрузить страницу внутри контейнера приложения AJAX, если пользователь попытается начать воспроизведение музыки. Это должно обеспечить бесшовную музыку. В любом случае, спасибо за ваш вклад - person Munim; 16.02.2011