jQuery YoutubeVideo Plugin 1.1.4
Позволяет встраивать на сайт видеоролики с YouTube более простым и оптимальным способом с точки зрения скорости загрузки сайта и адаптивности.
- Формирование превью в стиле YouTube + возможность кастомизации элементов (обложка, продолжительность, оригинальные заголовок и описание, кнопка воспроизведения).
- Загрузка содержимого плеера по событию (экономия трафика при загрузке страницы).
- Адаптивный(возможность указывать соотношение сторон для области видео)/фиксированный режимы.
- Возможность задавать новые/переопределять опции через data-атрибуты индивидуально для каждого видео.
Пакетные менеджеры:
# Bower bower install --save youtubevideo-jsПодключение:
- Подключить jQuery, jquery.youtubevideo.js и css jquery.youtubevideo.css
<!-- jquery.youtubevideo.css --> <link rel="stylesheet" href="jquery.youtubevideo.css"/> <!-- jQuery --> <script src="libs/jquery/dist/jquery.min.js"></script> <!-- jQuery ajaxTransport XDomainRequest (для некотор. опций, если нужна поддержка IE8 и IE9) --> <script src="libs/jQuery-ajaxTransport-XDomainRequest/jquery.xdomainrequest.min.js"></script> <!-- jquery.youtubevideo.js --> <script src="jquery.youtubevideo.js"></script>- Задать HTML-элемент, в который будет помещен видеоролик.
В атрибуте "data-ytb-vedeo" указать ID ролика.
<div class="example-video" data-ytb-video="9VDFTEoMSis"></div>- Инициализировать плагин на элементе(группе элементов):
$('.example-video').youtubeVideo();Примеры использования:
https://wahawaher.github.io/youtubeVideo/
Параметры:
| Опция | Тип | Поум. | Описание |
|---|---|---|---|
type | string | 'video' | Тип встраиваемого видео: 'video' - обычный видеоролик и 'playlist'. Для плэйлистов на данный момент не доступен запуск с параметрами и установка стандартных обложек. |
cover | string | array | boolean(false) | 'mqdefault' | Обложка видео. false - не загружать обложку 'default' - 120x90 'mqdefault' - 320x180 'hqdefault' - 480x360 (не у всех видеороликов) 'sddefault' - 640x480 (не у всех видеороликов) 'maxresdefault' - 1280x720 (не у всех видеороликов) 'http://...' - путь к собственному изображению Можно задать массив значений(строки: стд. значения и ссылки). В данном случае будет загружена обложка по первому доступному ключу(т.е. итоговая ссылка которого будет рабочей). Для работы с этой опцией требуется указать ключ API. |
aspectRatio | number | boolean(false) | 56.25 | Адаптивный режим. Подстраивает высоту ролика под ширину в определенном соотношении. Значение false отменяет адаптивный режим (размеры уст. вручную через css). 56.25 - 16:9 75.25 - 4:3 80.25 - 5:4 100 - 1:1 |
playMode | string | jQuery DOM Object | 'block' | Режим воспроизведения: 'block' - воспр. по событию на блоке с видео. 'button' - воспр. по событию на кнопке воспроизведения. Либо jQuery объект произвольного элемента/ов DOM. |
playEvent | string | boolean(false) | 'click' | Событие, при которм будет подгружен iFrame с роликом. Поддерж. стандартные js-события. При false, iFrame будет загружаться автоматически. |
parametrs | string | 'autoplay=1&autohide=1' | Параметры проигрывателя. Каждый новый параметр через "&" |
layout | object | см.1 | Основные элементы разметки. |
api | string | '' | Ключ YouTube Data API v3. Необходимо указывать для работы с параметрами: title, description, duration, cover. Получить ключ здесь |
title | boolean | false | Отображение оригинального заголовка видео. HTML-элемент должен иметь атрибут "data-ytb-title-id" со значением ID видео. Может быть помещен в любое место документа. Для работы с этой опцией требуется указать ключ API. |
description | boolean | false | Отображение оригинального описания видео. HTML-элемент должен иметь атрибут "data-ytb-descr-id" со значением ID видео. Может быть помещен в любое место документа. Для работы с этой опцией требуется указать ключ API. |
duration | boolean | false | Отображение продолжительности видео. Для работы с этой опцией требуется указать ключ API. |
{ wrap: $('<div />', { class: 'ytb-video-wrap' }), container: $('<div />', { class: 'ytb-video-container' }), iframe: $('<iframe />', { class: 'ytb-video-iframe' }), button: $('<div />', { class: 'ytb-video-play-button'}) .append('<svg>...</svg>'), }Функции обратного вызова:
| Callback | Аргументы | Поум. | Описание |
|---|---|---|---|
beforeInit | [sets:object] | n/a | Перед началом инициализации. |
afterInit | [sets:object] | n/a | После инициализации. |
beforeLoadIframe | [sets:object] | n/a | Перед загрузкой iFrame. |
afterLoadIframe | [sets:object] | n/a | По окончанию загрузки iFrame. |
afterLoadCover | [sets:object] | n/a | По окончанию загрузки обложки. |
$('.example-video').youtubeVideo({ beforeInit: function(sets) {}, afterInit: function(sets) {}, beforeLoadIframe: function(sets) {}, afterLoadIframe: function(sets) {}, afterLoadCover: function(sets) {}, });Публичные методы:
| Метод | Описание |
|---|---|
init | Инициализация |
reinit | Реинициализация |
destroy | Вернуть состояние до инита |
play | Воспроизведение |
// Инициализация var options = {}; $('.example-video').youtubeVideo('init', optuins); // Реинициализация $('.example-video').youtubeVideo('reinit'); // Реинит с текущими параметрами var newOptions = {}; // Объект с новыми параметрами $('.example-video').youtubeVideo('reinit', newOptions); // Реинит с новыми параметрами // Вернуть состояние элементa/ов до инита $('.example-video').youtubeVideo('destroy'); // Воспроизведение первого ранее инициализированного видео из выборки $('.example-video').eq(0).youtubeVideo('play'); // Переопределение настроек по умолчанию: $.fn.youtubeVideo.defaults = {};Дата-атрибуты:
Параметры в data-атрибуте имеют наивысший приоритет. Они переопределят параметры по умолчанию, а так же пользовательские параметры заданные при инициализации.
// Инициализация группы элементов $('.example-video').youtubeVideo(); <!-- Переопределение параметров для отдельных эл-ов через Data-атрибут: --> <div class="example-video" data-ytb-options="{ duration: true, }"></div> <div class="example-video" data-ytb-options="{ aspectRatio: 85 }"></div>Зависимости:
Требования
- jQuery версия 1.9.1 или выше
- jQuery ajaxTransport XDomainRequest (Cross-Domain AJAX для IE8 и IE9)
История изменений:
1.1.4 - 18.09.2018
- Добавлена возможность задавать в атрибут "data-ytb-video" ссылки с параметром
&t=.
1.1.3 - 18.09.2018
- Добавлена возможность задавать в атрибут "data-ytb-video" не только ID видео, но и полную ссылку вида:
https://www.youtube.com/watch?v=XQZUNoO-cLA?t=3s - Добавлены режимы воспроизведения (опция
playMode), позволяющие установить воспроизведение видео по событиюplayEventна блоке с видео, на кнопке или любом другом элементе DOM. - Незначительные правки в коде.
1.0.2 - 18.08.2018
- Добавлена поддержка цепочек вызовов
- Внесены изменения в наименования некоторых переменных
- Некоторые правки в readme.md
Лицензия (MIT)
Copyright (c) 2018 Sergey Kravchenko
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
