Подсказки: применение видео в качестве фонов

Подсказки: применение видео в качестве фонов

От автора: Итак, вы видели в сети видеоролики, используемые в качестве фонов, и думали: «Как это сделать?». Основная проблема тут – добиться того, чтобы ролик закрыл весь экран. Обычно при установке видео оно масштабируется в соответствии с соотношением размеров, что значит, оно не сможет закрыть весь фон. Но не беспокойтесь, потому что я здесь для того, чтобы сопроводить вас в вашем захватывающем квесте к свободе фонового видео. Читайте, юный воин.

скачать исходникидемо

Срываемся в полет

Во-первых, установите div с видео, которое нужно вам в качестве фона, а затем div с контентом, куда положите все содержимое. Не забудьте сделать скриншот видео и сохранить его как jpg с названием poster.jpg. Он послужит фоном для тех пользователей, чьи браузеры не поддерживают тэг video.

<div id="container">
	<video autoplay loop muted>
		<source src="video.mp4" type="video/mp4">
		<source src="video.webm" type="video/webm">
	</video>
	<div class="content">
		
	</div>
</div>

Далее нужно немного CSS, чтобы установить контент абсолютно позиционированным поверх видео:

#container {
	position: relative;
	overflow: hidden;
}

#container .content {
	position: absolute;
	top: 0;
	left: 0;
}

Отлично! Теперь все, что нужно сделать – придумать, как заставить видео растянуться во всю ширину экрана. Нам для этого придется воспользоваться магией Javascript’а:

Немного Javascript’а

Как уже говорилось, проблема в том, что соотношение размеров видеоролика сильно осложнит покрытие всего экрана. Как это исправить? Нам придется сравнить соотношение размеров окна с соотношением размеров видео. Затем можно умножить ширину видео, и путем этого расчета сделать так, что ролик будет всегда заполнять весь экран, вне зависимости от его размера. Не забудьте включить jQuery! Ваш код должен выглядеть примерно так:

$(function() {
	
	// определение IE
	function iedetect(v) {

	    var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
		return r.test(navigator.userAgent);
			
	}

	// Для мобильных экранов просто покажите изображение под названием 'poster.jpg'. Мобильные
	// экраны не поддерживают автопроигрывание видео, или для IE.
	if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
	
		(adjSize = function() { // Создайте функцию с названием adjSize
			
			$width = $(window).width(); // Ширина экрана
			$height = $(window).height(); // Высота экрана
			
			// Соответственно масштабируйте изображение
			$('#container').css({
				'background-image' : 'url(poster.jpg)', 
				'background-size' : 'cover', 
				'width' : $width+'px', 
				'height' : $height+'px'
			});
			
			// Скройте видео
			$('video').hide();
			
		})(); // Немедленно запустите
		
		// Запустите также масштабирование
		$(window).resize(adjSize);
	}
	else {

		// Подождите, пока загрузятся метаданные видео
		$('#container video').on('loadedmetadata', function() {
			
			var $width, $height, // Ширина и высота экрана
				$vidwidth = this.videoWidth, // Ширина видео (настоящая)
				$vidheight = this.videoHeight, // Высота видео (настоящая)
				$aspectRatio = $vidwidth / $vidheight; // Соотношение высоты и ширины видео
						
			(adjSize = function() { // Создайте функцию с названием adjSize
							
				$width = $(window).width(); // Ширина экрана
				$height = $(window).height(); // Высота экрана
							
				$boxRatio = $width / $height; // Соотношение экрана
							
				$adjRatio = $aspectRatio / $boxRatio; // Соотношение видео, разделенное на размер экрана
							
				// Установите контейнер на ширину и высоту экрана
				$('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 
							
				if($boxRatio < $aspectRatio) { // Если соотношение экрана меньше соотношения размеров...
					// Установите ширину видео на размер экрана, умноженный на $adjRatio
					$vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
				} else {
					// Еще раз установите видео на ширину экрана/контейнера
					$vid = $('#container video').css({'width' : $width+'px'});
				}
								 
			})(); // Немедленно запустите функцию
						
			// Запустите функцию также при изменении размера окна.
			$(window).resize(adjSize);
						
		});
	}
	
});

Вот теперь видеоролик закроет весь экран при изменении его размера пользователем! Следует запомнить:

Мобильные устройства не поддерживают автоматическое проигрывание видео, поэтому для них мы ничего не делаем. Вместо того покажите в качестве фона изображение с названием poster.jpg.

То же самое касается IE8 и ниже! Для этих браузеров будет применяться изображение poster.jpg.

Полноэкранные фоновые видеоролики – настоящая бомба веб-дизайна, поэтому я уверен, что вы найдете им применение. Примененный мной материал взят с Vimeo’s free HD Stock Footage, так что идите туда посмотрите. Хорошего вам дня!

Автор: Johnny Simpson

Источник: http://www.inserthtml.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (8)

  1. Евгений

    Исходники не скачиваются :(

  2. Ольга

    Жаль, что администратор не читает, и поэтому не отвечает на комментарии.Видно не заинтересован, чтоб пользователи правильно понимали и разбирали тему!

    • Андрей Кудлай

      Комментарии, насколько я понял, касались исходников. Поправили ссылку и теперь исходники можно скачать.

      • Ольга

        Подскажите, для какой цели в исходниках 2 одинаковых видео файла flowers.mp4 и flowers.webm Один выполняет роль фона, а второй для чего?

        • Андрей Кудлай

          По всей видимости для того, чтобы видео фон увидели пользователи, у которых не установлены кодеки для просмотра первого файла — .mp4, т.е. это своеобразный запасной вариант. Формат WebM же не требует дополнительных кодеков и уже поддерживается современными браузерами по умолчанию.

  3. Владимир

    Оцените пожалуйста еще один сайт с видеофоном – сайт «Живая Удмуртия» – liveudm.ru не напрягает ли посетителей? Важно объективное мнение. Спасибо

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

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

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

Я не робот.

Spam Protection by WP-SpamFree