Блог

Я пытаюсь воспроизводить один <video> src за другим — циклически перебирать набор из примерно 20 <video> элементов.

Каким-то образом кажется, что первые 1-2 цикла все работает нормально, но после этого он заклинивает, и скрипт начинает пропускать видеофайлы и замедляется. У кого-нибудь есть идеи, что не так с моим JS?

 <video id="video-1" class="collage below" muted playsinline>
    <source src="video/collage-01.mp4" type="video/mp4">
</video>

<video id="video-2" class="collage above" muted playsinline>
    <source src="video/collage-02.mp4" type="video/mp4">
</video>

<video id="video-3" class="collage below" muted playsinline>
    <source src="video/collage-03.mp4" type="video/mp4">
</video>

...
  

 var allVideos = document.querySelectorAll('video.collage');
var count = 0;

function playVideos(e){
    if (count >= allVideos.length){
        count = 0;
    }
    for (let i = 1; i < allVideos.length; i  ) {
        allVideos[i].style.visibility = 'hidden';
    }
    
    allVideos[count].style.visibility = 'visible';
    allVideos[count].play();
    allVideos[count].addEventListener('ended', videoFinished, false);
    
    function videoFinished(e) {
        allVideos[count].style.visibility = 'hidden';
        count  ;
        playVideos();
    }
}

playVideos();