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中可以看到的问题是，在加载视频时，背景图像会很快显示出来。可能的解决方法是使用视频的第一帧作为背景图像，但这会使横幅不那么灵活并对视频制作提出更高的要求。我也考虑使用Modernizr的特征检测，但在这方面似乎非常不可靠。

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

Answer 1

您可以将后备广告作为视频源下的img（在Chrome中测试），而不是使用背景风格作为后备广告。

我更新了你的小提琴以展示新的行为。

小提琴：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>

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

1 个答案: