как воспроизводить видео один за другим без перерыва

Question

У меня есть папка с несколькими сотнями файлов mp4 продолжительностью 2 секунды каждый. Я хотел бы воспроизводить их один за другим без сбоев между ними.

Я попробовал то, что рекомендуется в Воспроизведение видео один за другим в html5 , но это не решает проблему сбоевмежду видеопереходами.

<video width="256" height="192"  id="myVideo" controls autoplay>
    <source src="../uploads/VID_190923141334_20190923_141336.mp4" id="mp4Source" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script type='text/javascript'>
    var player=document.getElementById('myVideo');
    var mp4Vid = document.getElementById('mp4Source');
    player.addEventListener('ended',myHandler_ended,false);

    function myHandler_ended(e)
    {
        mp4Vid.src = "../uploads/VID_190923141334_20190923_141338.mp4";
        player.load();
        player.play();
}
</script>

Может кто-нибудь указать мне правильное направление, чтобы устранить сбой в каждом видеопереходе?

Answer 1

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

Два видеоэлемента находятся на одном и том же месте на странице, один над другим.

Вы воспроизводите первое видео и, когда вы приближаетесь к концу его, предварительно загружаете, а затем приостанавливаете второе видео, но держите плеер скрытым,

В том месте, где заканчивается первое видео, вы прячете первого игрока, показываете и запускаете второго игрока.

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

Фрагмент ниже начала скрываетвторое видео, пока не закончится первое, а затем воспроизводит второе, скрывая первое. Это просто грубая схема, с которой вы можете играть, где вы указываете фильмы и т. Д. Если вы наведете указатель мыши на видео, вы можете посмотреть временную шкалу - фильмы постепенно исчезают, поэтому может быть неочевидно, что они воспроизводятся.

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"
vid1.onended = function() {
  vid2.play();
};

vid1.onloadeddata = function() {
    vid1.currentTime = 725;
    vid1.play()
};

vid1.onended = function() {
    vid2.play()
    vid1.style.display = "none"
    vid2.style.display = "block"
};

<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>