Загрузка видео на лету

Question

Я относительно новичок в веб-программировании и, следовательно, имею проблемы с сохранением моего кода. Работая над последним проектом, среди прочего, я должен был сделать следующее:

1. автозапуска на главной странице один из восьми доступных видео (например, главный-VID-3.webm);
2. Когда это закончится, начните играть следующее (в этом случае main-vid-4.webm);
3. Затем воспроизведите следующее видео и так далее. После восьмого видео необходимо воспроизвести main-vid-1.

Если я начал играть в следующее видео сразу после предыдущего, у меня было отставание, так как новое видео еще не было загружено. Мое решение проблемы:

1. Два видеотега на странице, один из них имеет отображение: нет;
2. Когда видео с дисплеем: конец блока, он скрывается, когда появляется другое видео и начинает воспроизведение;
3. Когда это видео воспроизводится, источник скрытого видео изменяется с помощью JS и начинает загрузку (но пока не воспроизводится);
4. повторить шаг 2;

Это сработало, но мой код (особенно JS-часть и необходимость иметь два видео-тега на странице) не кажется мне чистым и прекрасным. Есть ли лучшее решение проблемы?

<section id="main-page-top"> 
 
\t \t <video id="bgvid-<?php echo $vidId; ?>" autoplay width="100%"> 
 
\t \t \t <source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidId; ?>.webm" type="video/webm"> 
 
\t \t </video> 
 
\t \t <video id="bgvid-<?php echo ($vidId + 1); ?>" class="hidden" width="100%"> 
 
\t \t \t <source src="<?php echo get_template_directory_uri(); ?>/inc/main-vid-<?php echo $vidIdAlt; ?>.webm" type="video/webm"> 
 
\t \t </video> 
 
</section>

document.getElementById('#main-page-top video:nth-child(1)').addEventListener('ended', function() { 
 
    document.getElementById('#main-page-top video:nth-child(1)').style.display = "none"; 
 
    document.getElementById('#main-page-top video:nth-child(2)').style.display = "block"; 
 
    document.getElementById('#main-page-top video:nth-child(2)').play(); 
 
    var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(1)').id.substring(6)); 
 
    if (vidNum === 7) { 
 
    vidNum = -1; 
 
    } else if (vidNum === 8) { 
 
    vidNum = 0; 
 
    } 
 
    document.getElementById('#main-page-top video:nth-child(1)').setAttribute('id', 'bgvid-' + (vidNum + 2)); 
 
    document.getElementById('#main-page-top video:nth-child(1) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); 
 
    document.getElementById('#main-page-top video:nth-child(1)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); 
 
    document.getElementById('#main-page-top video:nth-child(1)').load(); 
 
    document.getElementById('#main-page-top video:nth-child(1)').pause(); 
 
}); 
 

 
document.getElementById('#main-page-top video:nth-child(2)').addEventListener('ended', function() { 
 
    document.getElementById('#main-page-top video:nth-child(2)').style.display = "none"; 
 
    document.getElementById('#main-page-top video:nth-child(1)').style.display = "block"; 
 
    document.getElementById('#main-page-top video:nth-child(1)').play(); 
 
    var vidNum = parseInt(document.getElementById('#main-page-top video:nth-child(2)').id.substring(6)); 
 
    if (vidNum === 7) { 
 
    vidNum = -1; 
 
    } else if (vidNum === 8) { 
 
    vidNum = 0; 
 
    } 
 
    document.getElementById('#main-page-top video:nth-child(2)').setAttribute('id', 'bgvid-' + (vidNum + 2)); 
 
    document.getElementById('#main-page-top video:nth-child(2) source').setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); 
 
    document.getElementById('#main-page-top video:nth-child(2)').setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); 
 
    document.getElementById('#main-page-top video:nth-child(2)').load(); 
 
    document.getElementById('#main-page-top video:nth-child(2)').pause(); 
 
});

Answer 1

Спасибо вам, ребята. Я не могу найти, могу ли я отметить ваши комментарии в качестве правильных ответов.

Теперь код выглядит следующим образом (добавлена ​​функция для увядающей вход/выход):

var vidFading = function(p1, p2) { 
 
    $(p1).on('timeupdate', function(event) { 
 
     var current = Math.round(event.target.currentTime * 1000); 
 
     var total = Math.round(event.target.duration * 1000); 
 

 
     if ((total - current) < 500) { 
 
      $(this).fadeOut("slow"); 
 
      $(p2).fadeIn(1000); 
 
     } 
 
    }); 
 
} 
 
var vidFoo = function(p1, p2) { 
 
    var x = document.querySelector(p1); 
 
    var x1 = document.querySelector(p1 + ' source') 
 
    var y = document.querySelector(p2); 
 
    y.play(); 
 
    var vidNum = parseInt(document.querySelector(p1).id.substring(6)); 
 
    if (vidNum === 7) { 
 
     vidNum = -1; 
 
    } else if (vidNum === 8) { 
 
     vidNum = 0; 
 
    } 
 
    x.setAttribute('id', 'bgvid-' + (vidNum + 2)); 
 
    x1.setAttribute('src', 'http://u0065000.isp.regruhosting.ru/template/inc/main-vid-' + (vidNum + 2) + '.webm'); 
 
    x.setAttribute("poster", "http://u0065000.isp.regruhosting.ru/template/inc/main-vid-" + (vidNum + 2) + ".jpg"); 
 
    x.load(); 
 
    x.pause(); 
 
} 
 

 

 
if (document.getElementById('main-page')) { 
 

 
    vidFading('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)'); 
 
    vidFading('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)'); 
 

 
    document.querySelector('#main-page-vid video:nth-child(1)').addEventListener('ended', function() { 
 
     vidFoo('#main-page-vid video:nth-child(1)', '#main-page-vid video:nth-child(2)'); 
 
    }); 
 

 
    document.querySelector('#main-page-vid video:nth-child(2)').addEventListener('ended', function() { 
 
     vidFoo('#main-page-vid video:nth-child(2)', '#main-page-vid video:nth-child(1)'); 
 
    }); 
 
}