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

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

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

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

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

Во-первых, установите 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’а:


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

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

Немного 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.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика 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