Как создать видеофон для сайта
Свойства 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> с помощью фонового изображения.
Обслуживание мобильных устройств
Отображение полноэкранного фонового видео на мобильных устройствах связано с несколькими проблемами:
- Многие мобильные платформы отказываются автоматически воспроизводить HTML5- видео, чтобы уменьшить потребление трафика.
- На таких платформах фоновое видео будет отображаться со встроенной кнопкой воспроизведения, которая…
- … может перехватывать прикосновения к устройству, блокируя ссылки в контенте, размещенном поверх фонового видео.
Можно реализовать поддержку автозапуска видео с помощью 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.