html5 网页嵌入视频背景

css

video#bgvid {
    position: fixed; 
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

html

我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。

<video autoplay loop poster="vide.jpg" id="bgvid">
    <source src="vide.webm" type="video/webm">
    <source src="vide.mp4" type="video/mp4">
</video>

注意：这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。