Как создать видеофон для сайта

Свойства CSS background или background-image могут принимать в качестве значений только растровые изображения, SVG, цвет и градиенты. Видеофон для сайта можно использовать, разместив его позади других HTML-элементов. Задача состоит в том, чтобы видео заполняло окно браузера, и было адаптивным, как фоновые изображения.

Соображения и ограничения

При реализации необходимо учесть несколько факторов:

  • Автоматическое воспроизведение видео и звука должно быть отключено. Можно создать кнопку включения звука с помощью JavaScript.
  • Видео должно иметь изображение-заполнитель для браузеров, которые не поддерживают HTML5. Оно также отображается на мобильных устройствах. Многие смартфоны и планшеты не поддерживают атрибут autoplay.
  • Короткое видео может казаться повторяющимся (большинство роликов будет воспроизводиться циклически). Слишком длинное заслуживает того, чтобы стать отдельным элементом дизайна. Оптимальная продолжительность фонового видео составляет 12- 30 секунд.
  • Видео должно быть небольшим и сжатым. В то же время оно должно масштабироваться на разных устройствах и экранах. Можно использовать медиазапросы или matchmedia для отправки версий видео разного качества на пользовательские устройства с экранами различных размеров. При этом размер ролика не должен превышать 5 МБ, а в идеале – менее 500 КБ.

Подход на чистом CSS

Создайте HTML5-видео:

<video playsinline autoplay muted loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
</video>

Важно: порядок видеофайлов имеет значение. В браузере Google Chrome есть ошибка, из-за которой он не может автоматически воспроизводить видео в формате .webm, если оно идет после чего-либо еще.

Изображение постера будет заменено первым кадром видео после загрузки. Поэтому имеет смысл извлечь его из ролика.

Приведенный ниже код позволяет сделать видео полноэкранным:

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

Устаревшие версии браузеров не распознают видео форматы, но узнают тег <video>. Специально для этих браузеров мы создаем элемент background-image, используя ту же картинку-заполнитель.

На данном этапе только браузер Safari (мобильный и настольный) требует webkit-префикса поставщика для преобразований, поэтому он был включен в код.

Примечание по IE 8

IE8 не только не распознает тег <video>, но и весь HTML5. Но нам нужно стилизовать элемент в браузере и поместить в него фоновое изображение. Чтобы решить эту проблему, потребуется следующий код:

<!--[if lt IE 9]>
<script>
	document.createElement('video');
</script>
<![endif]-->

И объявление внутри CSS, которое позволяет IE понять, что это элемент уровня блока:

video { display: block; }

Что позволяет в IE8 стилизовать <video> с помощью фонового изображения.

Обслуживание мобильных устройств

Отображение полноэкранного фонового видео на мобильных устройствах связано с несколькими проблемами:

  1. Многие мобильные платформы отказываются автоматически воспроизводить HTML5- видео, чтобы уменьшить потребление трафика.
  2. На таких платформах фоновое видео будет отображаться со встроенной кнопкой воспроизведения, которая…
  3. … может перехватывать прикосновения к устройству, блокируя ссылки в контенте, размещенном поверх фонового видео.

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

@media screen and (max-device-width: 800px) {
    html {
         background: url(polina.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

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

Интеграция доступности

Пользователи с вестибулярными расстройствами могут быть дезориентированы. Особенно при попытке прочитать текст, размещенный поверх движущегося изображения. А люди с аутистическими расстройствами могут быть обеспокоены быстрыми изменениями. Поэтому кнопка паузы должна быть расположена в пределах досягаемости:

<button id="vidpause">Pause</button>

Для браузеров, в которых включен параметр доступности Prefers Reduced Motion (в настоящее время Safari 10.1), добавьте скрипт в нижнюю часть страницы:

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("vidpause");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

По умолчанию для этих пользователей видео будет приостановлено.

В идеале, фоновое видео должно останавливаться и исчезать сразу после первого воспроизведения. Чтобы реализовать это, добавьте следующий код:

function vidFade() {
    vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
    // используется только, если "цикл" отключен 
     vid.pause();
	// чтобы охватить IE10
	vidFade();
});
pauseButton.addEventListener("click", function() {
    vid.classList.toggle("stopfade");
	if (vid.paused) {
vid.play();
		pauseButton.innerHTML = "Pause";
	} else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
	}
})

JavaScript добавляет несколько строк кода CSS (для простоты префиксы поставщиков не указаны):

video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

Также нужно написать CSS для скрытия кнопки на мобильных устройствах. Иначе она будет отображаться на iPhone с iOS 9 или ниже.

Альтернативы на чистом JavaScript

Решение на HTML5 / CSS лучше, чем использование фреймворка. Но есть один JQuery-плагин , который позволяет получить результат, аналогичный описанному в статье.

Заключение

Фоновое видео может быть мощной функцией. Но с большой силой приходит и ответственность: пожалуйста, используйте подобные функции разумно.

Посмотрите демо-версию решения, описанного в этой статье, на CodePen.

Пожалуйста, оставьте свои отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, отклики, дизлайки!

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, лайки, отклики, подписки, дизлайки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «Create Fullscreen HTML5 Page Background Video»