Всем привет! Сегодня я покажу, как можно сделать видео галерею на JavaScript!
Не так давно я писал статью о том, как сделать динамическую галерею из плиток на JavaScript, в сегодняшнем уроке будет сделано что-то подобное, но с видео роликами!
Описание
У нас будет 6 видео роликов разных размеров, каждые 5 секунд они сами будут меняться местами.
Для того, чтобы все стало понятно, я нарисовал вот такую вот схему расположения и размеров роликов (плиток):
Как видите, под цифрой 1 самый большой ролик, под цифрами 2-6 ролики одинакового размера. Когда ролик, например, 5 встает на место первого ролика, то соответственно он увеличивается в размере, и наоборот.
Под роликами будет кнопка STOP (PLAY), для того, чтобы можно было остановить перемещение роликов и посмотреть один из них.
Реализация
Итак, для начала стоит дать текстовое описание логики.
На странице изначально будет размещено 6 кодов видео роликов с YouTube. Каждые 5 секунд, с помощью интервала, ролики будут меняться случайным образом (с помощью двух случайных чисел).
Теперь давайте рассмотрим HTML верстку выше размещенной схемы плиток (видео роликов):
<div id="wrap">
<div class="block1">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Huy2EU9m_3c"></iframe>
</div>
<div class="block2">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/6gCbAkqMKYg"></iframe>
</div>
<div class="block3">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/jXCxdLvdscU"></iframe>
</div>
<div class="block4">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/tJ7JcweIOZ4"></iframe>
</div>
<div class="block5">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/y2fNVztaC58"></iframe>
</div>
<div class="block6">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Fix7P6aGXQ"></iframe>
</div>
</div>
<button id="play">STOP</button>
Блок с идентификатором wrap выровнен по центру, он содержит 6 видео роликов, каждый из которых обернут в div.
Давайте возьмем один из роликов и разберем его параметры:
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Fix7P6aGXQ"></iframe>
- width – ширина видео плеера (можно задать в пикселях), при 100% плеер занимает всю ширину div блока, в котором он размещен;
- height – высота видео плеера (можно задать в пикселях), при 100% плеер занимает всю высоту div блока, в котором он размещен;
- src – ссылка на видео ролик на сервисе YouTube, для замены видео достаточно заменить его идентификатор (в данном случае это 5Fix7P6aGXQ);
Далее идет кнопка с id – “play”. Также, у этой кнопки есть атрибут data-state, в котором по умолчанию лежит единица. Этот атрибут нужен для того, чтобы останавливать (запускать) перемещение видео роликов.
Если 1, то перемещение включено, если 0, то остановлено.
Теперь давайте рассмотрим CSS стили:
#wrap{
width: 600px;
height: 330px;
margin: 0 auto;
}
#wrap div{
width: 200px;
height: 110px;
float: left;
}
#wrap .block1{
width: 400px;
height: 220px;
}
#play{
margin: 20px auto;
display: block;
background: #4a4343;
color: #fff;
padding: 6px 20px;
border: 0;
font-size: 20px;
cursor: pointer;
}
- #wrap – стили для общего блока, в котором содержатся видео ролики;
- #wrap div – стили для всех “дивов” внутри общего блока;
- #wrap .block1 – стили для первого блока – самого большого;
- #play – стили для кнопки остановки и запуска перемещений.
Теперь давайте рассмотрим JavaScript (JQuery) код:
- play – переменная, которая хранит текущее состояние (play/stop);
- temp – переменная для временного хранения содержимого div блока, необходима для операции обмена;
- random1 и random2 – переменные, в которых хранятся случайные числа, в первой хранится случайное число от 1 до 3, а во втором число от 4 до 6, то есть могут меняться, например, такие плитки, как: 1 и 4, 2 и 4, 3 и 5 и так далее.
Далее идет обработка нажатия на кнопку и проверка текущего состояния. Если state = 1 (то есть галерея запущена), то меняем состояние на 0, а надпись “STOP” меняем на “PLAY”.
После этого идет функция changeVideo, которая запускается с интервалом в 5 секунд (5 тысяч миллисекунд).
В этой функции проверяется текущее состояние, если “play равно true (правда)”, то плитки галереи перемещаются.
Перемещение осуществляется простым способом.
Сначала генерируется 2 случайных числа (о диапазонах этих чисел описано выше), в переменную temp сохраняем содержимое (код видео плеера) первого случайного div блока, потом в первый случайный div блок вставляем содержимое второго случайного div блока, а после, во второй случайный div блок вставляем содержимое переменной temp.
Вот так вот осуществляется перемещение плиток (видео) галереи.
Как и в других уроках по JavaScript вы можете посмотреть реальный пример урока, а также скачать его к себе на компьютер!
Посмотреть результат
Скачать
На этом у меня все, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.