Матвей Земсков

Заметки веб-мастера

Пятница, 22 мая 2015 14:50

Размещаем видео на сайт в качестве фона HTML-элемента

Оцените материал
(3 голосов)

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

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

Еще один момент, который нужно учитывать при размещении тега <video> на страницах сайта: разные браузеры поддерживают разные форматы видео файлов, то есть нет одного универсального формата, который бы работал во всех браузерах. В общем-то для обеспечения кросс-браузерности можно использовать 2 формата: mp4 и webm. Для того, чтобы преобразовать один формат в другой (например, mp4 в webm) можно воспользоваться одним из бесплатных онлайн-конверторов, которые существуют в сети.

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

Итак, пора перходить к делу. Как же все-таки сделать видео фоном сайта? Для начала создадим страницу примерно следующего содержания:

HTML

<div class="wrapper">		
	<video autoplay id="bgvid" loop>
		<source src="/path/to/videofile.webm" type="video/webm" />
		<source src="/path/to/videofile.mp4" type="video/mp4" />
		Тег video не поддерживается вашим браузером.
		<a href="/path/to/videofile.mp4">Скачайте видео</a>.				
	</video>		
	<div id="info-block">
		<h1>Phasellus consectetur, nunc eget pellentesque dignissim</h1>		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis lectus neque, at faucibus neque consequat eu. Vivamus accumsan pulvinar mi nec molestie. Nam pretium nisi vitae tortor lacinia congue.</p>
		<p>Ut at condimentum risus. Phasellus consectetur, nunc eget pellentesque dignissim, ante urna eleifend ante, quis gravida nisi mauris at arcu. Cras quis hendrerit lectus.</p>
		<p>In hac habitasse platea dictumst. Suspendisse potenti. Fusce at felis euismod, viverra metus a, consequat diam. Quisque ac tortor facilisis, tincidunt ante quis, blandit velit. Fusce tincidunt et elit quis dictum. Curabitur interdum scelerisque ornare. Quisque non dolor nisl. Quisque fringilla enim ligula, non posuere mi scelerisque a. Suspendisse non posuere magna. Donec euismod ex vitae eros tincidunt imperdiet.</p>
		<button>Pause</button>
	</div>	
</div>

Она состоит из 3 основных блоков: «обертки», блока с видео и блока с текстом. Блок с текстом будет располагаться поверх блока с видео. В итоге получится, что видео является «фоном» у текстового блока.

Чтобы этого добиться нужно применить к элементам страницы следующий CSS-код:

CSS

.stopfade {opacity: .5;}
.wrapper{max-width:1920px; margin:0 auto; overflow: hidden; position:relative;}
a{color:#fff;}
a:hover{text-decoration: none;}
video{min-width:100%;}
#info-block{font-family: 'Comfortaa', cursive; font-weight:100; background: rgba(0,0,0,0.3); color: white; padding: 2em; width: 33%; margin:2em; position: absolute;
z-index:1000; right:0%; top:0; font-size: 1em;}
#info-block h1{font-size: 1.3em; margin-bottom: 20px;}
#info-block p{font-size:.9em; margin-bottom: 10px;}
#info-block button{display: block; width: 80%; padding: .4em; border: none; margin: 1rem auto; font-size: 1.3em; background: rgba(255,255,255,0.23); color: #fff; 
border-radius: 3px; cursor: pointer; transition: .3s background;}
#info-block button:hover {background: rgba(0,0,0,0.5);}

Практически все готово. После проведения вышеуказанных действий — вы получите веб-страницу с видео в качестве фона. Видеоролик будет запускаться сразу после загрузки страницы и будет проигрываться непрерывно — за это отвечают атрибуты тега <video> - autoplay и loop.

Давайте добавим немного динамичности: при клике по кнопке в текстовом блоке (<button>) видео будет приостанавливаться, а при повторном клике проигрываться снова. В этом нам поможет следующий JS-код.

JavaScript

 $(function(){
	var vid = document.getElementById('bgvid');
	var pause = $('#info-block button');
	
	vid.onEnded = function(){
		this.pause();
		this.classList.add('stopfade');
	}
	
	pause.on('click', function(){
		vid.classList.toggle('stopfade');
		
		if(vid.paused){
			vid.play();
			$(this).html('Pause');
		}
		else{
			vid.pause();
			$(this).html('Paused');
		}			
	});
 });

Я разместил его в отдельном файле (script.js) и подключил к страничке. В принципе в нем нет ничего сложного: сохраняем в переменных ссылку на элементы: <video> и <button>. Затем пишем код, который обрабатывает события этих элементов: для кнопки — это click, для блока с видеороликом — ended. Вообще у HTML5 элемента <video> - довольно много различных свойств и методов. Подробнее ознакомиться с ними можно на сайте w3schools.com.

Ну вот собственно и все. Надеюсь, что статья будет полезна читателю и после прочтения он сможет разместить видео на сайт в качестве «фона» какого-нибудь блока.

Результат доступен на демо-странице, при желании вы сможете с ним ознакомиться.

Прочитано 3144 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: