Pull to refresh

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

Reading time 2 min
Views 2.4K
Как известно, youtube является крупнейшим видеохостингом в мире.
Помимо прочего, здесь хранится как огромное музыкальных клипов, так и просто песен. Дело в том, что ютуб очень часто используют и как хостинг для аудио композиций, видимо потому что в интернете не существует специализированного аудиохостинга. Таким образом возникла идея сделать аудио плеер на основе музыкальных роликов из ютуба…

Задача


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

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


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

Ограничения


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

Итог


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

Буду благодарен любым замечаниям и предложениям
Tags:
Hubs:
+12
Comments 15
Comments Comments 15

Articles