video作为网站的背景？ HTML 5
我想使用video作为背景，而不是自动延伸到整个屏幕（背景）的图像。
我也想旋转video和图像..以便有任何顺序显示随机video/图像。
知道如何延迟video播放也是很好的，因此video只能在站点加载后的30秒内播放。
谢谢！
看看我的jQuery的videoBG插件
http://syddev.com/jquery.videoBG/
将任何HTML5video作为网站背景…对不支持HTML5的浏览器具有图片回退function
真的好用
让我知道你是否需要任何帮助。
首先，你的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%; }
这将在您的页面上创build一个video元素，开始播放第一个video，然后遍历由JavaScriptvariables定义的播放列表。 你的CSS的里程可能会有所不同，取决于网站的其他部分的CSS，但100％的宽度/高度应该在基本页面上做。
我可能有一个解决scheme的video作为背景，拉伸到浏览器的宽度或高度，（但video仍然保持高宽比，找不到解决scheme呢）：
将video放在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并把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%; }
希望我能帮上忙。 让我知道，当你可以find一个解决scheme，video不保持高宽比，所以它可以填充整个浏览器窗口，所以我们不必把一个bgimage。
