видео в качестве фона сайта?HTML 5 - PullRequest
Новая
       22

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

56 голосов
/ 27 сентября 2010

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

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

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

ТНХ!

Ответы [ 3 ]

37 голосов
/ 15 марта 2011

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

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

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

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

Дайте мне знать, если вам нужна помощь.

25 голосов
/ 27 сентября 2010

Во-первых, ваша 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% ширина / высота должны делать это на базовой странице.

8 голосов
/ 01 марта 2011

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

Поместите видео сразу после тега 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.

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

Похожие темы

...