视频背景未在 chrome 中显示答案

【问题标题】：video background not showing in chrome视频背景未在 chrome 中显示
【发布时间】：2018-06-28 22:21:20
【问题描述】：

这是我体内的 html
此代码适用于覆盖 div 并在顶部覆盖的视频。我可以使用帮助，因为视频没有出现在 chrome 中。我试过使用webm。文件和 ogv 但它不工作。感谢您提供任何和所有帮助。

 <section>
<div class="jumbotron jumbotron-fluid" id="hero">
  <div class="container">

    <h3 class="hero-subtitle">Lorem Ipsum</h1>
    <p class="hero-content">The main content goes here </p>
        <br>
        <h6 class="hero-excerpt">subtitle </h6>
  </div>
</div>
</section>

CSS 页面

#hero {
min-height: 70vh;
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.45)
),
/* bottom, image */
url('background_video.mp4');

background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
.hero-subtitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
}
.hero-content{
font-size: 1.25rem;
font-weight: 300;
}
.hero-excerpt{
font-size: 1rem;
font-weight: 300;
}
}

【问题讨论】：

这段代码中没有引用视频...你怎么称呼视频？
由于保密协议，我没有包含视频，任何视频都可以。
这不是有效的 html：<h3 class="hero-subtitle">Lorem Ipsum</h1>（错误的结束标签） - 不确定这是否是导致问题的原因，但应该可以修复。

标签： javascript html css google-chrome

【解决方案1】：

url('background_video.mp4')

您不能直接将视频文件用作背景图片。 url css data type 在background 样式中使用时被设置为background-image 属性。因此，该属性的 url 需要指向图像，而不是视频文件。

跨浏览器解决方案

如果您希望视频作为某些元素的背景播放，您需要将其放入包含所需内容的容器中。用positioning it with position:absolute覆盖它并设置适当的z-indexes：

.container {
  position:relative;
  width:320px;
  height:180px;
}

.container video {
  position:absolute;
  width:320px;
  height:180px;
  left:0px;
  top:0px;
  z-index:1;
}

.container .content {
  position:relative;
  width:320px;
  height:180px;
  z-index:2;
  background-color:rgba(0,0,0,0.7);
  color:white;
  line-height:180px;
  text-align:center;
}

<div class="container">
  <video autoplay muted src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
  <div class="content">Some content</div>
</div>

仅限 Firefox（截至 2018 年 6 月）

在 Firefox 中，您可以使用另一个元素作为 background-image，因此在这种情况下，您可以使用 <video> 元素作为背景。使用浏览器前缀函数element()。当传递元素的 css id 选择器时，将使用该元素作为背景

#content {
  width:320px;
  height:180px;
  background-image:-moz-element(#backgroundvideo);
  line-height:180px;
  text-align:center;
  color:white;
}

<video style="display:none;" autoplay muted id="backgroundvideo" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
<div id="content">Some content</div>

【讨论】：