我想学习如何将背景视频放入 html 中,就像在 https://vimeo.com 中所做的那样
我的容器宽度是 1000px。
视频的大小和分辨率应该是多少才能加载得更快并且大小合适?顶部和底部没有黑色。
此外,任何人都可以帮助进行 html5 和 css3 编码吗?你能告诉我代码吗?
我想按照您的指示自学如何在背景中重新制作视频。
最佳答案
您可以使用视频 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。媒体查询也可能有帮助。
关于html5和css3视频背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30787350/