你能否展示HTML5< video>作为全屏幕背景？ [英] Can you display HTML5 <video> as a full screen background?

问题描述

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

How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...

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

推荐答案

在视频上使用 position：fixed ，将其设置为100％宽度/高度，并设置为负数 z-index 就可以了，所以它出现在所有东西后面。

Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.

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

If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.

HTML

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

（添加webm和ogg源以支持更多浏览器）

(Add webm and ogg sources to support more browsers)

CSS

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

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

It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.

这篇关于你能否展示HTML5< video>作为全屏幕背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！