Lecaw

Учимся создавать Web-сайты

Allofthelights.js – jQuery плагин выключения света для воспроизведения видео

October 11, 2012 336hits

ДЕМО

 Исходные файлы

 

 

Функции

  • Работает с любым видео фреймом
  • Адаптируемое видео
  • Пользовательский фон (цвет, прозрачность)
  • Исчезающий переход
  • Настраиваемая кнопка переключателя
  • Управление скоростью анимации
  • Поддержка нескольких проигрывателей
  • Поддержка современных браузеров
  • Небольшой вес
  • Необходим jQuery 1.7+

Как работает?

Изначально я планировал сделать один контейнер, чтобы использовать его во всем документе и работать с z-index видео iframe. К сожалению, я столкнулся с проблемами в некоторых проигрывателях: плагин работал с YouTube, но не с Dailymotion, и т.д. я поэтому решил сделать новый сценарий, который будет работать с любым проигрывателем.

Alloffthelights.js вычисляет смещение видео и создает четыре контейнера с абсолютной позицией. Смещение вычисляется повторно, если свет включен или окно изменено.

Первый div
Второй div Видео Третий div
Четвертый div

Использование

Щаг 1 – Ссылка на ресурсы

Добавьте эти ссылки (jQuery 1.7 +, CSS, ядро Allofthelights.js и файлы JS) к странице.

<link rel="stylesheet" href="/stylesheets/jquery.allofthelights.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="/javascripts/jquery.allofthelights.js"></script>

Шаг 2 – Добавляем видео и переключатель

Для видео добавим iframe идентификатор и поместим кнопку переключателя в любое подходящее место на странице (помните, ее идентификатор должен соответствовать опции switch_id). Когда свет будет выключен, плагин добавит суффикс '_off' к идентификатору переключателя (взгляните на allofthelights.css).

<div id="switch"></div>
<iframe id="video" width="600" height="338" src="http://www.youtube.com/embed/HAfFfqiYLp0" frameborder="0" allowfullscreen=""></iframe>

Шаг 3 – Вызов Allofthelights.js

Вызов JS функции:

$(document).ready(function() {
    $("#video").allofthelights();
});

Опции

КлючОписание
color Цвет фона
opacity Непрозрачность фона
z_index z_index фона
switch_id CSS id переключателя
animation Тип анимации ('fade' или 'none').
delay_turn_on Определение задержки перед запускам анимации включения света
delay_turn_off Определение задержки перед запускам анимации выключения света
scrolling Позволяет отключить прокрутку при включенном свете
clickable_bg При щелчке по фону выключает свет
is_responsive Включает видео
custom_player Доступен когда is_responsive = true. Позволяет исплоьзовать пользовательский проигрыватель.

Пример опций:

$(document).ready(function() {
$("#video").allofthelights({
'opacity': '0.7',
'delay_turn_on': '3000',
'clickable_bg': true,
'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"
});
});

ДЕМО

 Исходные файлы

Дополнительная информация

RATTING:
(1 Голосовать)

Медиа