Question

我希望这个问题能够得到好评，因为已经存在这样的问题，但我仍然需要问这个问题，因为我找不到合适的解决方案。

我也知道这个问题是重复的，但我已经看过所有关于背景视频的问题，检查了很多其他网站的答案，每个人都写了相同的代码，但它仍然不适合我出于某种原因...

所以，这是我的简单代码：

＆＃13;

#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

#bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%; 
  min-height: 100%;
}

＆＃13;

<div id="loading">
  <video id="bgvideo">
    <source src="CM.mp4" type="video/mp4">
  </video>
</div>

＆＃13;

此代码应该根据我见过的答案工作，但视频没有播放。

有人知道会出现什么问题吗？它是代码还是问题的根源还是别的什么？

提前感谢您的帮助：）

Answer 1

如果你想让它自动播放，只需要自动播放

＆＃13;

#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

#bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%; 
  min-height: 100%;
}

＆＃13;

<div id="loading">
  <video id="bgvideo" autoplay>
     <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
Your browser does not support the video tag.
  </video>
  
</div>

＆＃13;

Answer 2

HTML部分：

<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
  </video>
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
      </div>
    </div>
  </div>
</header>

CSS PART：

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

JSFiddle Link to try code

如何将背景视频添加到html页面？

2 个答案: