HTML5 内的视频 owl 轮播以某种方式加载了两次

Question

不知何故，我的 owl 轮播中的视频有多个下载。只有 3 个视频出现，这是正确的。但是灯塔显示多次下载的视频......？现在我得到了非常糟糕的分数。

部分有问题的代码：

<section id="akp-home" class="home-slider owl-carousel">
  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/manufacture.jpg.webp');">
    <div class="video-container">
          <video autoplay muted loop>
              <!--<source src="https://www.dropbox.com/s/raw/jzkpjsn81nau7d8/manufacture-v3.mp4" type="video/mp4">-->
              <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/manufacture-v3.mp4" type="video/mp4">

          </video>

    </div>



    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=vRBDEKI6rcw" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1 class="mb-4"><span>Contract Manufacturing</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>
  </div>

  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/recycle.jpg.webp');">
     <div class="video-container">
          <video autoplay muted loop>
              <!--<source src="https://www.dropbox.com/s/raw/cgsk4kfru9ewmdl/recycle-v3.mp4" type="video/mp4">-->
              <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/recycle-v3.mp4" type="video/mp4">
          </video>

    </div>

    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=HaDoKXG5xPU&t=28s" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1><span>Recycling</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>

  </div>

  <div class="slider-item" style="background-image: url('https://anugerahkreasiplasindo.id//wp-content/uploads-webpc/2020/06/logistic.jpg.webp');">
      <div class="video-container">
          <video autoplay muted loop>
            <!--<source src="https://www.dropbox.com/s/raw/p8wogpeh4nr0wgp/logistic-v3.mp4" type="video/mp4">-->
            <source src="https://anugerahkreasiplasindo.id//wp-content/uploads/2020/06/logistic-v3.mp4" type="video/mp4">

          </video>

    </div>
    <div class="container">
      <div class="row slider-text align-items-center justify-content-center">
        <div class="col-lg-7 text-center col-sm-12 element-animate">
          <!--<div class="btn-play-wrap mx-auto"><p class="mb-4"><a href="https://www.youtube.com/watch?v=HaDoKXG5xPU&t=28s" data-fancybox data-ratio="2" class="btn-play"><span class="ion ion-ios-play"></span></a></p></div>-->
          <h1><span>Logistic Service</span></h1>
          <!--<p class="mb-5 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>-->
        </div>
      </div>
    </div>

  </div>

</section>

实际有问题的网站：https://anugerahkreasiplasindo.id

灯塔报告的一部分：

我什至不知道如何隔离问题。要添加更多信息，请访问检查元素页面。为什么会有 "cloned" owl 轮播？

Answer 1

我们开始吧，显然解决了我的问题。

loop: false,
rewind: true

将其放在 owl 轮播 javascript 部分。它会停止克隆，灯塔不会下载视频两次。

我的原始代码有 loop: true 。我不敢相信就这么简单。

HTML5 内的视频 owl 轮播以某种方式加载了两次

HTML5 video inside owl carousel somehow loaded twice

owl-carousel