» »

Выключить свет при просмотре плеера на сайте

Выключить свет при просмотре плеера на сайте

Многие встречали скрипт включить и выключить свет на сайте при просмотре плеера, это основном ставят на тематику кого онлайн просмотр. Теперь вы можете установить на свой портал и разместить кнопку где вам нужно, это над плеером или в низу его. При выключение, сама кнопка становится светлее, также идут стили, что вы можете сами вывести оттенок затемнение. Это что касается самого затемнение и его процент, также вывести кнопку, здесь можно сменить под свою стилистику.

Это можно сделать на любой площадке, где к материалу установлено видел, просто с описанием поставить выключатель. Но основном его стразу устанавливают вид материалов и комментариев, любого модуля. Но основном можно заметить на кино сайте, работает когда плеер не развернут на весь монитор. Плюс в том, что сам скрипт простой и полностью рабочий и по установке также.

Здесь будет представлен код с кнопкой, это когда вы можете поставить ее сами по вашему выбору. Но есть еще и второй вариант, это тот где представлено изображение выключателя, вот оно больше для портала, где из материала идет как просмотр фильмов или другого видео. Так по умолчанию это выключатель будет установлен в левом ввернем углу. Здесь вам мешать, так как есть из чего выбрать, второй способ будет представлен в архиве, что нужно скачать.

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

Приступаем к установке:

1. Для начало в CSS сайта пропишем стили, в них все написано, за что какие отвечают.

Код
.shortstory iframe,.shortstory object,.dark-video {position:relative;z-index:999;}  
#dark-block {position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:998;width:100%;height:100%;display:none;}  
/*стили плавающей иконки*/  
img#switch-on {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;}  
img#switch-off {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;display:none;}  
/*стили обычной кнопки*/  
a#switch-on {background:#888;color:#fff;position:relative;z-index:999;}  
a#switch-off {background:#fff;color:#888;position:relative;z-index:999;display:none;}  
a[id^="switch"] {padding:5px 10px;display:inline;border-radius:4px;}  
a[id^="switch"]:hover {opacity:0.7;}


Теперь идем в админ панель и нужно установить кнопку, ставим там где вам нужно. Здесь сразу выставлено по центру.

Код
<div align="center"><a href="javascript://" onclick="setCookie('light-on',1,365);eraseCookie('light-off');" id="switch-on">Выключить свет</a>  
<a href="javascript://" onclick="setCookie('light-off',1,365);eraseCookie('light-on');" id="switch-off">Включить свет</a>  
<script type="text/javascript" src="http://zornet.ru/Aben/Aben-Abag/darkino.js"></script></div>


2. Остается найти плеер с канала ютуб пусть будет и на нем проверим.
3. Как нашли плеер, то его обязательно нужно поставить в этот код.

Код
<div class="dark-video">СТАВИМ ПЛЕЕР ЗДЕСЬ</div>


На этом вся установка, все сохраняем и потом наслаждаемся этой функцией. Второй вариант вам будет предоставлен в архиве, что перекреплен к этому материалу.

Как работает, вы можете посмотреть демонстрацию на этот материал.

Источник: Fullweb.ucoz.ru
18.02.2017 Загрузок: 7 Просмотров: 947 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
Сопрано
Сопрано 18.02.2017 23:501
0
Смотри, работает и все как нужно темновата раполагаеться, но мне интересно, это под только ютуб сделано или на кино сайтах с плеерами с фильмами работает.
Kosten
Kosten 18.02.2017 23:572
0
Все будет работать на кино сайте, там есть некоторые плееры, которые идут с другим кодом, но основные то идут с iframe и как понимаю, здесь на это значение заточено.
Сафрон
Сафрон 19.02.2017 00:003
0
Интересно, а почему на странице html не получилось сделать DEMO и здесь нужно было страницу создавать под него, чтоб посмотреть.
csretven
csretven 19.02.2017 00:134
0
Вот не когда не думал, что так легко все можно настроить, то есть поставить, всего один файл отвечает, а что кнопку, если кино сайт,то ставить чтоб сразу видна она была, это по второму решению говорю.
Советник
Советник 19.02.2017 00:155
0
Как то приходилось его устанавливать одному администратору, но там не много по другому, здесь нужно было еще файл в архив кинуть, но просто кто то не хочет ставить ссылку и решит свою поставить.
Angerfist
Angerfist 19.02.2017 16:546
0
очень сложный вариант представлен) с одним сценарием JS есть
avatar