css - 带有背景图像的视频在页面加载时闪烁

Question

我正在尝试制作一个横幅，该横幅应该显示带有标题的视频。对于不支持视频标签或提供的视频源的浏览器，横幅应该回退到使用背景图像。我目前的解决方案是这样的:

HTML

<div class="container">
  <video autoplay  muted loop preload="none" class="video" style="background-image: url(http://source.to/background-image.jpg);">
    <source src="http://source.to/video.mp4">
  </video>

  <h1 class="title">
    This is the banner title
  </h1>
</div>

CSS

.container {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.video {
  height: auto; 
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.title{
  position: absolute;
  top: 200px;
  width: 100%;
  text-align: center;
  color: white;
}

jsfiddle (在 Chrome 中测试)。

正如在 jsfiddle 中看到的那样，问题是背景图像将在视频加载时很快显示。一种可能的解决方法是使用视频的第一帧作为背景图像，但这会降低横幅的灵 active ，并对视频制作提出更高的要求。我也考虑过使用 Modernizr的特征检测，但在这方面似乎很不可靠。

有什么好的方法可以解决这个问题吗？

Answer 1

与其使用背景样式作为后备，不如将后备作为 img 放在视频源下(已在 chrome 中测试)。

我更新了您的 fiddle 以展示新行为。

fiddle :https://jsfiddle.net/v9u657wb/4/

新的 HTML 代码(css 不变):

<div class="container">
<video autoplay  muted loop preload="none" class="video">
  <source src="http://techslides.com/demos/sample-videos/small.mp4">
  <img src="http://www.votingmonkey.com/res/fb_users/136test-banner-2.jpg">
</video>

<h1 class="title">
  This is the banner title
</h1>