How To Play Videos One After Another Without Gap

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

Solution 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

Solution 2:

One approach is to have two video elements and players on your page - this approach is often used for pre, mid and post roll adverts, which are often from a different source than the main video itself.

The two video elements are in the same place on the page, one over the other.

You play the first video and when you are near the end of it preload and then pause the second video but keep the player hidden.

At the point where the first video ends, you hide the first player and show and start the second player.

You then again preload and pause the next video in the player you have just hidden and it becomes the one ready to start when the one now playing is finished.

The snippet below hides the second video until the first has ended and then plays the second one hiding the first. This is just a rough outline you can play with where you cue the movies to etc. If you leave your pointer over the video you can watch the timeline - films fade in and out so it may not be obvious it is playing.

Hover over the video ion the snippet while it is playing to see the time as it switches from one to the other.

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"

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

vid2.onloadeddata = function() {
    vid2.currentTime = 10; //Just to illusrate as begining is black screen
    vid2.pause()
};

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://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" 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://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>