是否可以让 div 的背景成为具有“包含”属性的 HTML5 视频？

Posted 2023-02-23

【中文标题】是否可以让 div 的背景成为具有“包含”属性的 HTML5 视频？

【英文标题】：Is it possible to have a div's background be an HTML5 video with the "contain" property?

【发布时间】：2014-10-19 02:04:27

【问题描述】：

我希望将 div 的背景设置为 html5 视频/webm，我想知道它是否有可能具有“包含”属性并保持其纵横比？我不想让视频覆盖整个屏幕，而是让 div 延伸 100% 的宽度和设定的高度。我想要隐藏超出高度阈值的视频部分？

这可能吗？提前致谢。

【问题讨论】：

您说您没有将视频完全覆盖框架，但您所描述的正是如此。但是您无法为视频设置背景，但您可以使用 div 填充video 然后在其上叠加另一个 div。

啊，我的意思是我不希望视频填满整个浏览器窗口 (100% x 100%)，而是包含在 div 中（视频充当 div 背景）。包含视频的 div 是 100% 宽度和大约 450px 高度。我希望视频的行为方式与图像具有“包含”属性的图像相同，即在调整大小时剪辑从 div 底部溢出的内容

再次，您不能将视频设置为背景属性，但您可以在视频对象上设置 css 并设置 min-height 和 min-width 属性并溢出隐藏，您应该很好。

【参考方案1】：

来吧：

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

它不是一个完整的解决方案，因为我还没有找到一种方法来使视频元素尊重其包含的 div 的高度。它似乎也消耗了它下面的所有 div，我现在正在处理它。

【参考方案2】：

/*===== Start HTML 5 Video DIV Background ===*/

.full-video 
  background: url(image) no-repeat 0 0;
  background-attachment: fixed;
  padding: 0px 0px 0px 0px;
  color: #6a6a6a;


.video 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


.video-cover 
  position: relative;
  height: 850px;
  overflow: hidden;


.video-cover video 
  object-fit: cover;
  background-image: url(image) no-repeat 0 0;

<div class="video-cover">
  <video class="video" muted autoplay loop playsinline poster="video/image">
    <source src="video/xxx.mp4"  type="video/mp4">              
    <source src="video/xxx.webm" type="video/webm">
    <source src="video/xxx.ogg"  type="video/ogg">
    Your browser doesn't support HTML5 video tag.
  </video>
</div>

【讨论】：

这是我使用的 css 设置，效果很好。

纯代码答案并不是特别有用。请添加一些关于此代码如何解决问题的描述。