Rol*_*and 56 html video html5 background html5-video
我想使用视频作为背景而不是自动延伸到整个屏幕(背景)的图像.
我还想旋转视频和图像..这样就可以按任意顺序显示随机视频/图像.
知道如何延迟视频播放也是很好的,这样视频只能在网站加载后30秒播放一次.
谢谢!
syd*_*nce 37
看看我的jquery videoBG插件
http://syddev.com/jquery.videoBG/
将任何HTML5视频设为网站背景...对于不支持html5的浏览器具有图像回退功能
真的很容易使用
如果您需要任何帮助,请告诉我.
Jey*_*ran 25
首先,您的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
我可能有一个视频作为背景的解决方案,拉伸到浏览器的宽度或高度,(但视频仍将保留纵横比,但尚未找到解决方案.):
将视频放在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-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.