- PVSM.RU - https://www.pvsm.ru -

jQuery плагин для проигрывания музыки с youtube

Как известно, youtube является крупнейшим видеохостингом в мире.
Помимо прочего, здесь хранится как огромное музыкальных клипов, так и просто песен. Дело в том, что ютуб очень часто используют и как хостинг [1] для аудио композиций, видимо потому что в интернете не существует специализированного аудиохостинга. Таким образом возникла идея сделать аудио плеер на основе музыкальных роликов из ютуба…

Задача

Итак, такой плеер должен отвечать следующим требованиям:

  • быть оформленным как плагин jQuery для простого подключения к существующим страницам сайта;
  • предоставлять необходимые базовые возможности, а именно: формирование и смена плейлиста на основе поискового запроса, вывод названия текущего трека, переключение треков (предыдущий/следующий), управление воспроизведением (пауза/играть);
  • быть «невидимым», т.е. предоставлять лишь базовый API, благодаря чему плеер можно обернуть в любой кастомный интерфейс;

Решение, функциональность

В итоге получился достаточной компактный (меньше 200 строк кода) и удобный в использовании плагин. Необходимо лишь подключить два файла swfobject.js и jquery.youtube.js, а также инициализировать плагин простым вызовом $('#container').youtube();
После этого становятся доступны методы для управления плеером, такие как «prev», «next», «toggleplay» и др.
Пример использования и инструкции доступны на демо-странице [2]

Ограничения

Конечно, у предложенного решения есть и минусы.
Во-первых, youtube не позволяет получать только аудио поток, из за чего тратится лишний трафик и ресурсы на инициализацию видео плеера и его скрытие. К счастью, я не замечал каких либо задержек или лагов: плеер инициализируется почти мгновенно, треки так же грузятся вполне шустро.
Второй недостаток более существенен: плеер будет блокироваться flashblock-ом и ср-вами браузера для отложенной загрузки flash-роликов (вроде flash-to-click). Как можно бороться с этим я не придумал :(

Итог

Еще раз ссылка на демо-страницу [2]
Ссылка на загрузку плагина [3]

Буду благодарен любым замечаниям и предложениям

Автор: sindrom


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/muzy-ka/6058

Ссылки в тексте:

[1] хостинг: https://www.reg.ru/?rlink=reflink-717

[2] демо-странице: http://frexin.ru/jquery-youtube/demo.html

[3] Ссылка на загрузку плагина: http://frexin.ru/jquery-youtube/jquery.youtube-1.0.zip