Reducing Video Loading Time

Prefetching video during preroll at Dailymotion, by Guillaume Du Pontavice

Dailymotion Team
Jul 11, 2016 · 4 min read

At Dailymotion, we do our best to enhance our viewers experience. It is a known fact that video buffering is a big factor of user frustration, lots of studies and articles have shown that video rebuffering has a significant impact on user engagement.

There are two kinds of buffering:

In this post, we’ll explain the different directions we’re exploring to reduce video loading time.

Ways to reduce video loading time

Here are different technics we’re using to reduce video loading time.

Optimize the video delivery:

Reduce first fragment loading time by reducing its size:

Optimize the player startup sequence by prefetching the start of the video during the preroll. This technic is detailed below.

Playback Startup Sequence

See below a standard player startup sequence, it is made up of two slots:

Before being able to display the first video frame, 3 URLs need to be loaded before being able to playback an HLS playlist:

Manifest Prefetching

The idea is to split video loading into two parts:

This manifest prefetching has been implemented in our Flash and HTML5 Player, and we can observe a significant drop of median video loading time from 2400ms to 1100ms in our Flash Player.
Ad Loading time and Ad Display time also remains stable. No impact on Ads revenue.

The gain in our HTML5 Player was less substential. The reason why loading time reduction is significant in Flash is that our HLS media engine, flashls, supports progressive fragment parsing: the TS packets are parsed and transmuxed into FLV packets as soon as they’re loaded: therefore the playback could start even though the first fragment is not fully loaded yet.

This progressive parsing is not yet achievable in HTML5: our HTML5 streaming engine, hls.js, uses XMLHttpRequest to load manifests and fragments, which does not support onprogress() event on binary content.
Thus playback could only start after the entire loading/transmuxing of the first fragment into ISO-BMFF format, and video loading time is higher in HTML5. Fetch API will resolve this, but it is still an experimental feature and not yet available mainstream.

Stream Prefetching

To further improve video loading time, we decided to A/B test stream prefetching: the idea is to prefetch both manifests but also first video fragment during the Ad slot.

We implemented it in our HTML5 player and AB tested it: hls.js supports manifests and first fragment prefetching, even if <video> element isn't available (as it might be used to display a preroll video).
Refer to this config parameter.

See results on video loading time distribution below: as we can see the loading time is significantly reduced — by half — for most playback sessions.

Then we also compared viewers behavior: as it can be seen below, more users are watching to the end of the video; which is a good way of showing that streaming experience was better overall.

On the revenue side, we also noted that although the preroll revenue decreases slightly, it was compensated by an increase in midroll / postroll revenue. So overall, we provided our viewers with an improved streaming experience without compromising our revenues. We continue our quest to enhance user experience, and the next step is to enhance hls.jsABR algorithm, through A/B testing.

Dailymotion

The home for videos that matter

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store