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

в 12:15, , рубрики: jquery, YouTube, музыка, плагин, плеер, метки: , , , ,

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

Задача

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

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

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

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

Ограничения

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

Итог

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

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

Автор: sindrom

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js