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

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

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

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

Спасибо!

Источник

4 ответа

Take a look at my jquery videoBG plugin

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

Make any HTML5 video a site background... has an image fallback for browsers that don't support html5

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

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

Источник

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

Источник

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

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

Источник

Tailwind CSS (на React.js/JSX)

Если вы используете Tailwind CSS, вы должны установить ширину и высоту в соответствии с размером экрана, а затем установить объектную подгонку на покрытие:

      <video autoPlay muted loop id="myVideo" src="/video_bg.mp4" itemType="video/mp4" className='w-screen h-screen object-cover'>

Обычный CSS

... или вы можете просто применить этот CSS к своему элементу видео:

      #myVideo {
   width: 100vw;
   height: 100vw;
   object-fit: cover;
}
Источник
Другие вопросы по тегам