2

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

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

我需要加载网站并在没有播放器控件或任何东西的情况下播放 5 秒的剪辑，然后直接进入主站点。

就像这个例子：http ://www.firecrackerfilms.com/

谢谢 ：）

4

4 回答 4

3

如果你需要设置背景视频试试这个

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;
}
于 2012-04-30T19:06:54.677 回答
1

您示例中的页面不是全屏的，甚至也不是 full-viewport，它是一个黑色背景的小视频，与页面的黑色背景融为一体。如果你能侥幸做到这一点，那将奏效。

如果您在意，您将永远无法在 iPad 上自动播放 HTML5 视频介绍，因为 iOS 禁止autoload并且autoplay除非它们是由手指触摸屏幕触发的。但是话又说回来，它无论如何都无法播放 Flash。

如果您希望 HTML5 视频是全视口的，例如，在 4:3 显示器中观看的 16:9 视频，您将使视频全高并丢失视频的侧面。对于相反的情况也是如此。这将保持视频的纵横比，但需要注意的是您会丢失部分视频内容以隐藏溢出。

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

出于这个原因，使用他们在您的示例网站上所做的事情可能更容易，并使视频融入背景。

于 2012-04-30T19:15:36.297 回答
0

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

如果您的意思是填充整个视口，则可以通过使用 css 来调整视频元素的大小，但需要注意的是，如果您将宽度和高度设置为与视频的纵横比不匹配的内容，则视频不会被拉伸填满盒子。取而代之的是，视频保留了正确的纵横比，并在视频元素内加了信箱。视频将在视频元素内尽可能大地渲染，同时保持纵横比。

于 2012-04-30T19:05:49.030 回答
0

这是一个关于 html5 与 Flash 视频及其优缺点的好帖子： HTML 5 <video> 标签与 Flash 视频。优缺点都有什么？

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

但是html5没有flash视频强大。

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

于 2012-04-30T19:04:29.573 回答