html5-video - 可以将 HTML5 显示为全屏背景吗？

Question

如何显示 HTML5 <video>作为您网站的全屏背景？类似于此 Flash 站点演示...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

在视频上使用 position:fixed，将其设置为 100% 宽度/高度，并在其上放置一个负的 z-index，以便它出现在所有内容的后面。

如果你看VideoJS ，控件只是位于视频顶部的 html 元素，使用 z-index 来确保它们位于上方。

HTML

<video id="video_background" src="video.mp4" autoplay>

(添加webm和ogg源以支持更多浏览器)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

它适用于大多数 HTML5 浏览器，但可能不适用于 iPhone/iPad，因为在 iPhone/iPad 上需要激活视频，并且不喜欢上面的元素。