html - 视频不工作的引导轮播

Question

我在主页选项卡中有以视频为背景的轮播。轮播而不是视频，仅将视频的第一帧显示为图像。但是当我转到另一个选项卡时，例如“我的帐户”，然后回到家，视频显示得很好，就像视频一样，而不是图像。为什么会这样？

html:

<div id="carouselExampleIndicators" class="carousel 
slide router" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" 
      class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <video class="d-block w-100"  style="width: 80%;" 
       autoplay loop muted alt="First slide">
        <source src="assets/img/video/1.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <video class="d-block w-100"  style="width: 80%;" 
        autoplay loop muted alt="Second slide">
        <source src="assets/img/video/2.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
          consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
    <div class="carousel-item">
      <video class="d-block w-100"  style="width: 80%;" 
             autoplay loop muted alt="Third slide">
        <source src="assets/img/video/3.mp4" type="video/mp4" />
    </video>
      <div class="carousel-caption d-none d-md-block">
        <h5 style="color: black;">Slider One Item</h5>
        <p style="color: black;">Lorem ipsum dolor sit amet, 
           consectetur adipisicing elit. Maxime, nulla, tempore.
          Deserunt excepturi quas
          vero.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 
     role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" 
      role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS：

.router{
    margin-right: -2cm;
    margin-left: -2cm;
    margin-top: -22mm;
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .carousel-caption {
    bottom: 270px;
  }
  
  .carousel-caption h5 {
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
  }
  
  .carousel-caption p {
    width: 75%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
  }
  

标签： htmlcsscarouselangular-ui-bootstrap

Answer 1

Angular 中的视频有问题，回答我在这个线程中找到的问题：Angular HTML Fullscreen Video Autoplay Not Working

<video loop muted autoplay oncanplay="this.play()" 
       onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>