HTML5 видео внутри карусели сов как-то загружено дважды - PullRequest
1 голос
/ 16 июня 2020

Каким-то образом внутри моей совиной карусели есть несколько загрузок видео. Показывается только 3 видео, это правильно. Но Lighthouse показывает видео, загруженное несколько раз ...? И теперь я получил за это очень плохую оценку.

Часть проблемы c Код:

<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>

Актуальная проблема c сайт: https://anugerahkreasiplasindo.id

Часть отчета маяка:

lighthouse report

Я даже не знаю, как изолировать проблему. Чтобы добавить дополнительную информацию, перейдите на страницу проверки элемента. Зачем нужна "клонированная" сова-карусель?

enter image description here

1 Ответ

0 голосов
/ 16 июня 2020

Здесь мы go, по-видимому, этот вопрос исправил мою проблему.

loop: false,
rewind: true

поместил это в часть карусели совы javascript. Он перестанет клонировать, и Lighthouse не будет скачивать видео дважды.

В моем исходном коде loop: true. Не могу поверить, что это так просто.

...