Streaming a set of videos as in playlist without gap in transition

What I want is to display all these videos as one video, so that I would not have gaps in switching from video to video.

My first thought was to pre-process the videos clips on demand. Combine into one MP4 using something like ffmpeg with a smooth transition between clips (and cache this if it's feasible for your use case). Then you could use a conventional video.src={pre_processed.mp4} in the client.

Bountify hosts an example of using ffmpeg and ffprobe to crossfade two mp4 files (see the selected answer by LayZee). An abridged version of the function follows. You could use a similar function recursively to customize your own transition and combine files in your directory.

function smoothtransition(
    $videoFilePath1,
    $videoFilePath2,
    $transitionDurationSeconds,
    $outputFilePath,
    $qualityFormatSettings)
{
    $firstVideoDurationCommand = implode(" ", ["...ffprobe_command..."]);
    $firstVideoFileDuration = (float)shell_exec($firstVideoDurationCommand);
    $firstVideoFileFadeStart = $firstVideoFileDuration
        - (float)$transitionDurationSeconds;
    $crossfadeCommand = implode(" ", ["...ffmpeg_command..."]);

    exec($crossfadeCommand, $output, $returnCode);

    return $returnCode === 1 ? $outputFilePath : $returnCode;
}

// Usage:
smoothtransition(
    "{PATH_TO_YOUR_FOLDER}/first_video.mp4",
    "{PATH_TO_YOUR_FOLDER}/second_video.mp4",
    10,
    "{PATH_TO_YOUR_FOLDER}/output_video.mp4",
    null);

If you insist on using the basic html video player functionality (As you haven't provided much code to work with), one possibility would be to preload the different videos by including them using different source-tags, and hiding them through various means (changing display or underlaying them beneath the first video) while keeping track of the controls (i.e., pausing/muting them.) Once your code detects the first video to have stopped, you could then replace its html with the next one you previously hid.

The video source object itself has some interesting parameters you can play with to achieve what you want, too.

Otherwise, you should be able to manually add file request results to a video buffer yourself, as described in this article. You might be required to use other libraries as well to make your task easier.

One approach would be to have TWO different players on the page at the same time at any given moment and pre-buffer the second video while the first one is being watched. Let's assume the following structure (simplified example):

<video id="video1"></video>

<video id="video2" autoplay style="display:none" onloadstart="this.volume=0.0"></video>

Notice that the first video is visible while the second one is not (CSS). Also, the second video starts buffering and playing as soon as the page loads, but is muted. You will see the benefits of this "pre-buffer" in a second.

You then attach another JS listener to the first video which does the following steps:

1. As soon as playback on the first video ends, it hides player1
2. It shows player2 instead, seeks to position "0 seconds" and unmutes it
3. Since the browser already has some cached/buffered data, there should be minimal to no delay

PS: If you want to go even further, you can unmute and reset the second video 0.5 seconds before the first one ends. In that way you will avoid any possible delays or latency introduced by the browser but you risk overlaping audio if both videos contain some audio in this 0.5 seconds interval.