Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов.
Плагины позволяют подставить в бекграунд произвольного контейнера видео ролики с YouTube и Vimeo, в том числе и для body, т.е. как подложку для всего сайта.
Если вы имеете достаточно опыта работы с плагинами, то не стану вас задерживать, вот официальные доки:
Плагин для интеграции видео с Youtube
https://github.com/pupunzi/jquery.mb.YTPlayer/wiki
Плагин для интеграции видео с Vimeo
https://github.com/pupunzi/jQuery.mb.vimeo_player/wiki/Documentation
Алгоритм настройки и использования плагинов очень похож, потому дальнейшие пояснения буду вести на примере YTPlayer.
Подключение файлов
|
1 2 3 |
<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="inc/jquery.mb.YTPlayer.js"></script> |
В примере подключается 3-я версия jQuery, но реальные требования существенно ниже. Я интегрировал плагин в тему Drupal 7, где использовал jQuery версии 1.7. Но, видимо, выбрал не удачный момент для скачивания файлов, потому что половина функций YTPlayer не работала. То, что последняя версия в репозитории может быть «битой», ожидалось мной меньше всего. Я потратил некоторое время на то, чтобы разобраться с этой проблемой. В итоге, взял файлы плагина прямо с демо страницы.
Подключение плагина
Инициализацию рекомендуется проводить следующим образом:
|
1 2 3 |
jQuery(function(){ jQuery("#playerDomID").YTPlayer(); }); |
Все параметры видео вы указываете в контейнере playerDomID, но видео проигрывается не в нём же, а в том контейнере, что указан в параметре containment:
|
1 2 3 4 5 6 7 8 9 |
<div id="playerDomID" class="player" data-property="{ videoURL:'http://youtu.be/BsekcY04xvQ', containment: '.video-container', autoPlay:true, mute:true, startAt:0, opacity:1}">My video</div> <div class="video-container"></div> |
Вместо URL можно подставить просто видео ID, в данном примере это «BsekcY04xvQ».
Возможности
Кроме управления видео, плагин позволяет
- накладывать различные фильтры (доступны все CSS фильтры),
- накладывать водяные знаки,
- управлять громкостью звука.
Мобильные устройства
Youtube не позволяет выполнить запуск видео на мобильном устройстве. Чтобы на мобильнике вместо фонового видео не было шедевра Малевича, можно задать параметр — mobileFallbackImage, где нужно указать урл фоновой картинки.
Если плагин используется в качестве плееера, то управлять видео Youtube позволит только штатными инструментами.
