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?

What is this "glitch"? Could you give an example of the effect and provide a minimal reproducible example? — Emiel Zuurbier, Oct 04 '19 at 14:46
You haven't really defined what you mean by "glitch" but I'm guessing you mean a time gap between the end of one video and the start of another? Based on that code I'd expect there to potentially be a short gap between videos whilst it downloads the data for the next one - you don't initiate the download until the previous video has stopped playing. Moving data from the server to the client is not an instantaneous operation. — ADyson, Oct 04 '19 at 15:38
If that is the case, then OP could make a system which will fetch his video files sooner so that they are downloaded and ready to be played when needed. — Emiel Zuurbier, Oct 04 '19 at 19:38
Yes, by glitch I mean the gap between the end of one video and the start of the next video. — mquevedob, Oct 05 '19 at 15:06
OP=Original Poster. As these are small videos I'd suggest preloading at least a couple into memory while one is playing (something like the ajax solution here - https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706) — Offbeatmammal, Oct 06 '19 at 22:57
sorry, but i really fail to see how "https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706" will help me preload a couple of videos while the 1st video is being played. Maybe you could be more specific ? — mquevedob, Oct 08 '19 at 18:28
What would be the javascript functions to be used to have a video file preloaded and ready to be played without delay ? — mquevedob, Oct 09 '19 at 20:35

score 1 · Answer 1 · edited May 19 '20 at 17:09

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

edited May 19 '20 at 17:09

Mick

24,231
1
54
120

answered Mar 25 '20 at 15:05

DaWe

1,422
16
26

3

HLS is an ABR streaming protocol and you are correct it can definitely be used to reduce start up time, but individual videos still will have a load time. The 2 players one hidden can actually be used, and is used, with HLS and DASH (the other main ABR streaming protocol at this time) – Mick May 19 '20 at 17:08

Mick · Answer 2 · 2021-06-10T14:44:19.897

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>

do you know any code that implements this mechanism already ? — mquevedob, Oct 08 '19 at 18:20
@mquevedob - yes but unfortunately it cannot be shared. I will see if I can find an open source example and if I can I'll update the answer. — Mick, Oct 08 '19 at 19:59
Could you mention what would be the javascript functions involved in doing it ? — mquevedob, Oct 09 '19 at 20:34
Thanks a lot @Mick. I tested your script with my videos and I can still see a small gap when going from vid1 to vid2. I think that, by the time the onended() function is executed, it is already too late — mquevedob, Oct 12 '19 at 10:42
@mquevedob - sorry for late response, just noticed comment. You don't have to wait for the on ended event, you can use the progress event and start the second video earlier and/or make the switch earlier if you prefer. — Mick, Feb 20 '21 at 11:19

how to play videos one after another without gap

2 Answers2

Linked