javascript - how to play videos one after another without gap

Question

I have a folder with several hundred mp4 files of 2sec duration each. I would like to play them one after the other without any glitch between them.

I have tried what is advised in Playing videos one after another in html5 but this does not solve the glitch problem between video transitions.

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

Can anyone point me to the right direction in order to eliminate the glitch in each video transition?

Answer 1

The "2 players 1 hidden" method is not stable: it does not work on mobile devices, and it will lag on older/slower computers when switching one player to another. I wanted to create a live stream with this method, but it's an ugly DIY, don't do that.

There is an HTTP Live Streaming (HLS) standard and with it you can continuously play small m3u8 (.ts) chunks (it is supported by videoJS and OBS also has m3u8 recording support).

I made live streams on Sia Skynet, which is a static (non-modifiable) decentralized storage for files (like IPFS, but different). Here you can find some demos & the source code: https://github.com/DaWe35/Skylive