HTML5 видео как фон страницы

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

1. Форматы видео

Март 2024: Уже все актуальные браузеры поддерживают и WebM, и H.264

В своё время, браузеры разделились на 2 лагеря - те, которые поддерживают H.264, и те, которые выступают за открытые форматы вроде OGG/Theora и WebM. Соответственно, нужно было хотя бы 2 версии видео.

H.264 поддерживают на апрель 2024:

WebM поддерживают на апрель 2024:

Как видим, и все десктопные браузеры (за исключением почившего IE), и актуальные мобильные браузеры, поддерживают оба формата. Выбирай любой. Но если хочется поддерживать старые версии (и мобильный Firefox для Android), которые поддерживают только один формат, то можно добавить видео и в H.264, и в WebM.

2. HTML и CSS

Код видео:

<div id="trailer" class="is_overlay">
    <video id="video" width="100%" height="auto" autoplay loop muted playsinline preload>
        <source src="book.mp4"></source>
        <source src="book.webm" type="video/webm"></source>
    </video>
</div>

И CSS:

.is_overlay{
    display: block;
    width: 100%;
    height: 100%;
}

#trailer {	
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}

#trailer > video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

Собственно, этим кодом всё и сказано - div #trailer растягиваем на весь экран, внутри него наше видео, у него аттрибут autoplay, значит оно стартует сразу, как браузер решит, что уже можно начать играть, т.к. стоит preload="auto".

Получаем такую картинку:

Видим чёрные полосы по краям. Можно ещё для #trailer > video поменять CSS, чтобы их не было:

min-width: 100%;
min-height: 100%;
width: auto; height: auto;

Тогда мы получим видео на всю ширину:

Всё хорошо... Пока мы не изменим размер окна. Внезапно:

Тут нам на помощь приходят CSS Media Queries для управления пропорциями. Убираем добавленный на предыдущем шаге CSS-код и добавляем:

@media (min-aspect-ratio: 16/9) {
    #trailer > video { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
    #trailer > video { width: 300%; left: -100%; }
}

/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
@supports (object-fit: cover) {
    #trailer > video {
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

Это позволяет нам при разных размерах размерах окна/экрана центровать видео.

Ну вот, красота. Теперь главную часть, текст, увидят все.

3. Мобильные браузеры

С мобильными браузерами сложности.

Internet Explorer на Windows Phone всё показывает и играет без нареканий, проигрывание стартует автоматически.

На iOS в Safari на март 2024 автопроигрывание работает при указании атрибута playsinline для тега video, но только, если не включён режим энергосбережения. Если он включён - то видео играть не будет.

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

// находим видео
const videoElement = document.getElementById("video");

// картинка, которой заменим видео
const poster = document.getElementById("poster"); 

if (videoElement === null || poster === null) {
    return;
}

const promise = videoElement.play();

if (promise !== undefined) {
    promise
        .catch(error => {
            // Автовоспроизведение не удалось
            if (error.name === "NotAllowedError") {
                // скрываем видео
                videoElement.style.display = 'none'; 
                
                // показываем картинку вместо видео
                poster.style.display = "block";
            }
        })
        .then(() => {
            // всё хорошо
            videoElement.play();
        });
} 

На марта 2024 автопроигрывание прекрасно работает на последних версиях Android. Но на всякий случай оставляю абзац ниже.

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тега video атрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

var video = document.getElementById(element);
video.addEventListener('click',function(){
    video.play();
},false);

Для определения Android, чтобы добавить атрибут controls, я просто использовал Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
    video.setAttribute( 'controls','controls' );
}

Кроме того, чтобы это работало на Android, нельзя использовать атрибут type внутри source.

Такие вот дела. Итог с прелоадером тут.