To loop or to stream?

Hi! Some time ago I faced a rather simple problem — display full screen video background infinitely. This seemed to be quite easy. At first.

Naive solution

We have html video element, its loop attribute and fixed positioning. All these yields:

Everything should work as expected, except it’s not. Every 2s we see visually noticeable delay.

But why?

My guess is looping. Two seconds between consecutive delays is quite close to total video length. I could try here to run chrome under profiler, but that’s not our goal and it wouldn’t be time effective. We just want to play our video!

Here comes streaming

Modern browsers implement MediaSource API. Its primary use is video streaming, but we can repurpose it to implement infinite video.

Not every video can be played that way, it has to have specific format — we can check if video is supported using MediaSource.isTypeSupported. Our video isn’t, so let’s convert it first. Many people use ffmpeg here, but I’m on windows so that’s not that easy. Hopefully, there is a great tool mp4box that has binaries for windows.

Let’s execute:

C:\Users\Bartek\home\repo\testing>mp4box -dash 1000 video.mp4

This command generates two files — video_dashinit.mp4 and video_dash.mpd. The second one contains:

<Representation id=”1" mimeType=”video/mp4" codecs=”avc3.4D401F,mp4a.40.2" width=”1280" height=”720" frameRate=”30" sar=”1:1" startWithSAP=”0" bandwidth=”1688071">

That’s our new mime type.

Let’s now implement streaming:

Let’s check result in chrome’s performance tab:

Smooth video at 60fps!

That’s all. Thanks for reading! Looking for next posts!

All resources used in this post are available in my Github repo https://github.com/bartekbp/blog/tree/master/infinite-video-jitter.