html - 用视频背景替换图片背景

Question

用视频背景替换我当前拥有的图片背景，同时保留其所有属性的最快方法是什么？

到目前为止，这是我的代码:

<div id="hero">
<div id="bg"></div>
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
<div class="post-header"><img src="http://www.makemeapro.org/wp-content/uploads/2015/07/logo.png" style="max-width:100%;height:auto;"></div>
<div class="post-header"><h1 style="color: #383838;">Helping young professionals navigate the world of work.</h1></div>
<div align="center"><button class="btn">JOIN THE REVOLUTION</button></div>
        </td>
    </tr>
</table>
</div>

JsFiddle 在这里:http://jsfiddle.net/zxqz7oe0/

Answer 1

用视频替换图片背景的一种快速方法是将视频放在该图片的顶部，并使用 object-fit 使其覆盖父区域。 .它需要对 HTML 和 CSS 进行少量更改:

HTML:

<div id="bg">
     <video autoplay loop>
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
          <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
     </video>
</div>

CSS:

#hero video {
  width:100%;
  height:100%;
  object-fit:cover; /* Resize the video to cover parent, like a background-size:cover */
}

#hero #bg {
  /* The styles for #bg remain the same, you'd just need to add */
  /* one more, so the video that overflows the #hero is hidden: */
  overflow:hidden; 
}

你可以看到一个在这个 JSFiddle 上工作的例子:http://jsfiddle.net/zxqz7oe0/1/

此解决方案的一个问题是尚未完全支持 object-fit:Chrome、Firefox 和 Android 都可以，但您可能会在 Firefox 和移动设备上遇到问题。而且IE根本不支持。 (你可以 see the browser support here 。)

您可以使用这个简单的方法，然后为不支持 object-fit 的浏览器提供 JavaScript 后备解决方案。知道视频大小，就可以很容易地计算出加载/调整窗口大小时每个时刻所需的宽度/高度。