Smooth transition between different html5 videos

Question

I have a list of video tags which I need to play one by one with preset currentTime. When I load the page the readyState of videos get stuck at 1 and the video gives a starting glitch. I have used preload attribute still the video takes time to start playing on every switch. Even if some of the videos have currentTime set and readyState = 4 it takes time to play the video. I looked into xhr createObjectURL blob method but that takes too long for all the videos to get downloaded. For the same reason I did not try MediaSource API.

Answer 1

The media source extension (MSE) does not require you to download the whole video before you play it.

It allows you request a video segment by segment and manipulate the segments any way you want before you set them as the source for the video player.

There is a good overview along with some sample javascript which I think helps to understand the approach here: https://www.html5rocks.com/en/tutorials/eme/basics/

and you can see a simple working example here: https://github.com/bitmovin/mse-demo/blob/master/index.html

The general approach is:

• create a MediaSource object
• Set the source of the video element in your HTML page to the MediaSource object
• Add a listener for the MediaSource being opened (when the video is played)
• get the first segment and add a listener to request the next segment
• as segments are received append them to the MediaSource buffer
• when there are no more segments to be requested stop

In your case you can immediately start to request the next video when you get to the end of the first.

One other thing twitch for - mp4 videos often have their metadata at the end which means you need to download the entire video to start. You can move the metadata to the start using special tools or simply make sure you put it there in the first place if you are doing the transcoding yourself. ffmpeg supports moving the data with the command line option '-movflags faststart', for example.