Question

好的，我需要将视频加载全屏作为网站的介绍。我可以在HTML5中执行此操作还是需要使用闪存？

有人可以向我解释或指出一些有关如何做到这一点的好资源。

我需要网站加载和5秒剪辑才能播放，没有播放器控件或任何东西，然后直接进入主站点。

谢谢:)

Answer 1

如果您需要设置背景视频，请尝试使用

在视频上使用position:fixed，将其设置为 100％ width/height，并在其上添加否定z-index，使其显示在所有内容后面。

如果查看VideoJS，控件只是html元素。

HTML

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

CSS

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

Answer 2

示例中的页面不是全屏，也不是全视口，it's a small video黑色背景混合到页面的黑色背景中。 如果你能做到这一点，那就行了。

如果你关心，你会在iPad上never be able to auto-play an HTML5 video介绍，因为iOS禁止autoload和autoplay，除非用手指触摸屏幕触发它们。但话又说回来，无论如何都无法播放Flash。

如果您希望HTML5视频为全视口，例如，在4：3监视器中观看的16：9视频，您将使视频达到全高并丢失视频的边缘。对于相反的情况也是如此。这将保持视频的宽高比，但需要注意的是丢失了部分视频内容以隐藏溢出。

如果您不关心宽高比，可以像@coder建议的那样制作视频height: 100%和width: 100%。

出于这个原因，可能更容易理解他们在您的示例网站上所做的事情，并将视频融入后台。

Answer 3

这是关于html5 vs flash视频的优秀主题及优缺点： HTML 5 <video> tag vs Flash video. What are the pros and cons?

我个人更喜欢html5，因为你可以在几乎所有设备类型上观看视频，如iphone或ipad等。

但是html5没有flash视频那么强大。

您还应该考虑一些用户在浏览器中禁用了javascript或flash配置。

Answer 4

我认为用户请求真正的全屏是不可能的。至少在闪存中它是不可能的。

如果你的意思是填充整个视口，那么可以通过使用css来调整视频元素的大小，但需要注意的是，如果你将宽度和高度设置为与视频宽高比不匹配的东西，视频没有拉伸填充框。相反，视频保留正确的宽高比，并在视频元素内使用letterbox。视频将在视频元素内尽可能大地呈现，同时保持宽高比。