Можете ли вы отобразить HTML5 <видео> в качестве полноэкранного фона?

Question

Как вы можете отобразить HTML5 <video> как полноэкранный фон для вашего сайта? Похожа на эту демонстрацию Flash сайта...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

Использование position:fixed на видео, установите его на 100% ширину / высоту и поставьте отрицательный z-index на нем, так что он стоит за всем.

Если вы посмотрите на VideoJS, элементы управления - это просто элементы HTML, расположенные в верхней части видео и использующие z-index, чтобы убедиться, что они выше.

HTML

<video id="video_background" src="video.mp4" autoplay>

(Добавьте источники webm и ogg для поддержки большего количества браузеров)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

Он будет работать в большинстве браузеров HTML5, но, вероятно, не в iPhone/iPad, где нужно активировать видео, и ему не нравятся элементы над ним.

Answer 2

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

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

Я попал в эту проблему не так давно и нашел решение, используя медиа-запросы.

Вот учебник, который я написал о том, как создать полноэкранный видео фон только с CSS

Я также добавлю код здесь:

HTML:

<div class="videoBgWrapper">
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
        <source src="videosfolder/video.webm" type="video/webm">
        <source src="videosfolder/video.mp4" type="video/mp4">
        <source src="videosfolder/video.ogv" type="video/ogg">
    </video>
</div>

CSS:

.videoBgWrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.videoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .videoBg{
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .videoBg {
    width: auto;
    height: 100%;
  }
}

Я надеюсь, что вы найдете это полезным.

Answer 3

Просто комментарий по этому поводу - я использовал HTML5-видео для полноэкранного фона, и он отлично работает - но не забудьте использовать Высота:100% и ширину: авто или наоборот - чтобы убедиться, что вы сохраняете соотношение сторон,

Что касается Ipads, вы можете (по-видимому) сделать это, имея скрытое, а затем принудительное срабатывание события click, и имея функцию события click, запускающую Load / Play ().

Ps - это не должно требовать никаких плагинов и может быть сделано с минимальным JS - Если вы нацеливаетесь на любое мобильное устройство (я предполагаю, что вы могли бы…), держаться подальше от любой такой платформы - это путь вперед.