全屏视频介绍 HTML5？答案

【问题标题】：Full Screen Video Intro HTML5?全屏视频介绍 HTML5？
【发布时间】：2012-04-30 18:58:12
【问题描述】：

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

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

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

谢谢:)

【问题讨论】：

【解决方案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;
}

【讨论】：

+1 我已经这样做了几次，但问题是你会失去视频的纵横比，因为你强制它适应视口。我提出的解决方案保持方面，但需要注意的是某些视频丢失了。根据我的经验，两者都可能是可接受的解决方案，这取决于您的视频内容。
为了完整起见仅提及:)

【解决方案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%。

因此，使用他们在您的示例网站上所做的操作可能更容易，并使视频融入背景。

【讨论】：

【解决方案3】：

这是一个关于 html5 与 flash 视频及其优缺点的好帖子： HTML 5 <video> tag vs Flash video. What are the pros and cons?

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

但是html5不如flash视频强大。

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

【讨论】：

【解决方案4】：

我认为用户请求时不可能实现真正的全屏。至少在 Flash 中是不可能的。

如果您的意思是填充整个视口，则可以使用 css 来调整视频元素的大小，但需要注意的是，如果您将宽度和高度设置为与视频的纵横比不匹配的内容，则视频未拉伸以填充框。取而代之的是，视频保留了正确的纵横比，并在视频元素内进行了信箱处理。视频将在视频元素内尽可能大地呈现，同时保持纵横比。

【讨论】：