Question

我想将视频用作背景而不是自动延伸到整个屏幕（背景）的图像。

我还想旋转视频和图片..这样就可以按任意顺序显示随机视频/图像。

知道如何延迟视频播放也很好，这样视频只能在网站加载后30秒播放。

THX！

Answer 1

看看我的jquery videoBG插件

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

将任何HTML5视频设为网站背景...对于不支持html5的浏览器有图像回退

真的很容易使用

如果您需要帮助，请告诉我。

Answer 2

首先，您的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％的宽度/高度应该在基本页面上进行。

Answer 3

我可能有一个视频作为背景的解决方案，延伸到浏览器的宽度或高度，（但视频仍将保留纵横比，但尚未找到解决方案。）：

将视频放在身份标记后面style="width:100%;"。紧接着，放一个“bodydummy”-tag：

<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-index正确放入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。

视频作为网站背景？ HTML 5

3 个答案: