html - html5和css3视频背景

我想学习如何像在https://vimeo.com中一样将背景视频放入html中

我的容器宽度为1000像素。

视频应以多大的尺寸显示，以便更快地加载并达到理想的尺寸？顶部和底部没有黑色。

此外，有人可以帮助html5和css3编码吗？你能告诉我代码吗？

我想听从您的指示，并教我如何在bg中重新创建视频。

最佳答案

您可以使用视频jQuery插件，例如http://syddev.com/jquery.videoBG/中的jQuery插件，以便使用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索引：-1）之下，b）大于屏幕。

Object-fit允许我们更改视频对尺寸过大或过小做出的反应。我选择了掩护，因为我认为剪掉一些视频并不重要。 fill将导致它占用空间，而忽略宽高比。默认为包含。此方法确实消除了黑条。

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