Ленивая загрузка и воспроизведение нескольких случайных HTML5-видео в окне просмотра - PullRequest
Новая
       45

Ленивая загрузка и воспроизведение нескольких случайных HTML5-видео в окне просмотра

1 голос
/ 13 апреля 2019

Я создаю веб-страницу для воспроизведения нескольких видео html5 одновременно.Я добавил скрипт отложенной загрузки + только видимый, чтобы при прокрутке загружались и воспроизводились только видео в окне просмотра.Посмотрите на демо.

Все отлично работает.Каждый раз, когда я обновляю страницу, она будет отображать видео в случайном порядке.Когда я прокручиваю вниз, он загружает видео и воспроизводит, а когда я продолжаю прокручивать, видео, которое идет вверх, приостанавливается.Когда я вернусь к просмотру только что просмотренных видео, они возобновятся.Ожидается.

Но есть проблема.Когда я прокручиваю вниз, а затем прокручиваю вверх, видео над окном просмотра начинает возобновляться, но видео под окном просмотра не останавливается, а продолжает воспроизводиться.

Я не знаю, что делать, чтобы видео подокно просмотра перестает играть.В демоверсии это работает, может быть, нормально, но когда я копирую тот же код и помещаю его в файл HTML на моем ПК, чтобы он отображал только 3 видео подряд на моем экране, возникает проблема: видео под окном просмотра сохраняетсяВоспроизведение, когда я прокручиваю вверх.

Вот демоверсия - Пожалуйста, нажмите для просмотра в полном объеме: 

var bLazy = new Blazy({
  // Options
});


// Shuffles elements in a list

var ul = document.querySelector("ul"), // get the list
  temp = ul.cloneNode(true), // clone the list
  i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while (i-- > 0)
  temp.appendChild(temp.children[Math.random() * i | 0]);

ul.parentNode.replaceChild(temp, ul); // copy shuffled back to 'ul'



$(window).scroll(function() {
  $('video').each(function() {
    if ($(this).visible()) {
      $(this)[0].play();
    } else {
      $(this)[0].pause();
    }
  })
});
ul {
  padding: 0;
  margin: 0;
}

*> :first-child,
*> :nth-child(2),
*> :nth-child(3) {
  padding: 0;
}

ul li {
  display: inline-block;
  padding: 70px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>


<ul>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
</ul>
...