видео в качестве фона сайта? HTML 5

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

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

Также было бы неплохо узнать, как отложить воспроизведение видео, чтобы видео воспроизводилось только один раз через 30 секунд после загрузки сайта.

Спасибо!


html background video html5-video
person Roland    schedule 27.09.2010    source источник
comment
Учтите, что многие посетители будут ненавидеть эту функцию (я активно блокирую ее с помощью adblock). Кроме того, видео могут нанести вред пользователю в двух случаях - при измеренных подключениях и при просмотре страницы в сеансе удаленного рабочего стола, который может стать непригодным для использования при низкой пропускной способности загрузки.   -  person Igor Levicki    schedule 09.06.2015

Ответы (3)


arrow_upward
36
arrow_downward

Взгляните на мой плагин jquery videoBG

http://syddev.com/jquery.videoBG/

Сделайте любое видео HTML5 фоном сайта ... есть резервное изображение для браузеров, не поддерживающих html5

Действительно проста в использовании

Дай мне знать, если тебе понадобится помощь.

person sydlawrence    schedule 15.03.2011
comment
Спасибо, Сидлоренс! Я начал с книги HTML5 (Лоусон и Шарп), затем зашел в Интернет ... искал повсюду видео фон html5 и прочитал множество не совсем правильной информации. Ваше решение сработало как шарм. - person ; 11.06.2011
comment
@sydlawrence, это отлично! Я реализовал ваше решение. Однако у меня есть одна проблема с интеграцией: плакат мигает на секунду перед загрузкой видео - как это сделать, чтобы плакат загружался только в том случае, если нет совместимости с видео html5? - person willdanceforfun; 20.06.2012
comment
привет, Syd, ваш плагин отлично работает, но, похоже, он не работает в firefox? как это возможно? Везде работает - person woony; 25.09.2012
comment
привет @sydlawrence! как я могу отключить звук по умолчанию? заранее спасибо за помощь. - person Parik Tiwari; 22.05.2014

arrow_upward
26
arrow_downward

Во-первых, ваша разметка HTML выглядит так:

<video id="awesome_video" src="first_video.mp4" autoplay />

Во-вторых, ваш код JavaScript будет выглядеть так:

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

И, наконец, что не менее важно, ваш CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Это создаст на вашей странице элемент видео, который сразу же начнет воспроизведение первого видео, а затем будет перебирать список воспроизведения, определенный переменной JavaScript. Ваш опыт использования CSS может варьироваться в зависимости от CSS для остальной части сайта, но 100% ширина / высота должны делать это на базовой странице.

person Jey Balachandran    schedule 27.09.2010
comment
спасибо, но полноэкранный код действительно не работает. он просто показывает видео в его исходном размере в верхнем левом верхнем углу, а также заставляет исчезнуть остальной текст на сайте! - person Roland; 22.10.2010
comment
Что ж, если вы хотите полноэкранный режим, то остальной текст на сайте, очевидно, исчезнет. Что касается полноэкранного режима, попробуйте установить высоту и ширину видеоэлемента в соответствии с размером области просмотра. Например, video.width = 1024; video.height = 768; - person Jey Balachandran; 26.10.2010
comment
Взгляните на мой ответ ниже. Учитываются все размеры экранов :) - person sydlawrence; 15.03.2011

arrow_upward
8
arrow_downward

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

Поместите видео сразу после тега body с style="width:100%;". Сразу после слов поставьте тег "bodydummy":

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

Поместите весь свой контент в bodydummy-div и правильно поместите z-индексы в CSS следующим образом:

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

Надеюсь, я смогу помочь. Дайте мне знать, когда вы сможете решить, что видео не поддерживает соотношение сторон, чтобы оно могло заполнить все окно браузера, и нам не нужно было помещать bgimage.

person moritz    schedule 01.03.2011