html5和css3视频背景

Question

我想学习如何将背景视频放入 html 中，就像在 https://vimeo.com 中所做的那样

我的容器宽度是 1000px。

视频的大小和分辨率应该是多少才能加载得更快并且大小合适？顶部和底部没有黑色。

此外，任何人都可以帮助进行 html5 和 css3 编码吗？你能告诉我代码吗？

我想按照您的指示自学如何在背景中重新制作视频。

Answer 1

您可以使用视频 jQuery 插件，例如 http://syddev.com/jquery.videoBG/ 中的插件为了用 javascript 制作视频背景。

这是我的代码:

<video  src="http://media.w3.org/2010/05/sintel/trailer.mp4" autoplay loop></video>

还有我的 CSS

video {
  display: block;
  height: 150%;
  left: 0;
  object-fit: cover;
  position: fixed;
  top: -25%;
  width: 100%;
  z-index: -1;
}

基本上，它所做的是定位视频，使其 a) 在内容下方(z-index:-1)和 b) 比屏幕大。

Object-fit 允许我们改变视频对大小过大或过小的 react 方式。我选择封面是因为我认为剪掉一些视频并不重要。 fill 会导致它占用空间，忽略纵横比。包含是默认值。这种方法确实消除了黑条。

但是，您还应确保在多种设备和尺寸上测试视频背景。消除黑条问题的更高级方法是使用 javascript 计算宽高比，然后将适当的源放入 DOM。媒体查询也可能有帮助。