Play Video Files Online Sequentially Without Delay/buffering Between Videos

May 30, 2024 Post a Comment

Is it possible to play video online that's made of two or more video files? Since my original post wasn't clear enough, here's expanded explanation and question. My site is hosted

Solution 1:

An approach that will work on some browsers currently, and on most browsers going forwards is to use the HTML5 Video Media Source Extension mechanism.

This essentially allows you replace a static 'src' file for a video in your HTML5 page, with a dynamic src buffer which you can then fill any way you want using your own Javascript code.

So you can write code to pre-buffer the second video when you get towards the end of the first video and then immediately start adding packets from the second video to the src right after the last packet for the first video.

In very high level terms this looks like:

Your HTML to insert the video where you want it in your page:

.
.
.
<div><videoid="yourVideo1"controls=""autoplay=""width="320"height="240"></video></div>
.
.
.

Your Javascript to provide the source for your video:

//Get the video elementvar videoElement = document.getElementById('yourVideo1');

//Create a 'MediaSource' and associate it with this videovar mediaSource = newMediaSource();
video.src = window.URL.createObjectURL(mediaSource);

//Add a listener to the MediaSource object to check for//the video been opened. In this function you can add your//code to get the get your videos from the servers and add//'chunks' to the media source buffer

mediaSource.addEventListener('sourceopen', function(e) {

  //Set the format of the source videovar mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

  //Get your video from the webwhile (not the end of your video playlist) {
    ...
    //Stream video from server 
    ...
    //Add packets received to the media source bufer
    mediaSourceBuffer.appendBuffer(receivedVideoPackets);

    //If near end of video start fetching next video to //avoid buffering delay
    ...

    //If end of video go to next video in playlist
    ...

  }


}, false);

Look at the HTML5 Rocks demo below to see this in action (for a slightly different usecase).

Given how tricky video manipulation is and the multitude of formats etc, it would be much easier for you if one of the established video players provided the functionality out of the box so I would still try their forums as mentioned in the comment, but at least you know it is technically possible.

The MSE spec is available here: