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

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

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

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

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

Answer 3

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

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

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

Вот учебник, который я написал о том, как создать полноэкранный видео-фон только с 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%;
  }
}

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