Видео галерея на JavaScript!



Всем привет! Сегодня я покажу, как можно сделать видео галерею на JavaScript!

Видео галерея на 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 data-state="1" 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) код:

<script type="text/javascript">
$(document).ready(function(){
	var play = true;
	var temp;
	var random1;
	var random2;

	$('#play').click(function(){

		if( $(this).data('state') == 1 ){
			play = false;
			$(this).data('state', 0).attr('data-state', 0).text('PLAY');
		}else{
			play = true;
			$(this).data('state', 1).attr('data-state', 1).text('STOP');
		}
	});

	function changeVideo() {
		if(play){
			random1 = Math.round((Math.random() * (3 - 1) + 1));
			random2 = Math.round((Math.random() * (6 - 4) + 4));
			temp = $('.block' + random1).html();
			$('.block' + random1).html( $('.block' + random2).html() );
			$('.block' + random2).html(temp);
		}
	}
	setInterval(changeVideo, 5000);
});
</script>
  • 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 вы можете посмотреть реальный пример урока, а также скачать его к себе на компьютер!

На этом у меня все, желаю вам удачи, пока!



Похожие публикации:

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>