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

Sep 16, 2014 at 14:35

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

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

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

H.264 поддерживают на данный момент:

WebM поддерживают:

Что интересно, Firefox поддерживает H.264, но не под Mac OS X. В общем, 2 версии видео, обе указываем как src - и охватили все современные браузеры.

2. HTML и CSS

Код видео:

<div id="trailer" class="is_overlay">
	<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
		<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 автопроигрывание отключено. Такая вот позиция Apple - чтобы батарейку не жрало. Поэтому там показывается видео со значком Play, на который надо нажать, после чего видео начинает играть на полный экран.

С 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.

Такие вот дела. Итог с прелоадером тут. Ну и пока что на dolphinmusic.ru тоже висит.

back