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

Свойства 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; 
}
Как создать текст внутри круга с помощью CSS

Устаревшие версии браузеров не распознают видео форматы, но узнают тег <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. … может перехватывать прикосновения к устройству, блокируя ссылки в контенте, размещенном поверх фонового видео.
Как создать таймер на сайт с помощью HTML, CSS и JavaScript

Можно реализовать поддержку автозапуска видео с помощью 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.

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