HTML5 Video Preload

April 12, 2013 12:42 pm | 8 Comments

At last week’s HTML5 Developer Conference I attended Philippe Le Hegaret‘s session on “Video in the Open Web Platform”. Since the amount of video on the Web is growing (more details in a future post), I wondered if the VIDEO tag’s preload behavior could account for that. Maybe its default behavior is to preload aggressively.

The VIDEO PRELOAD attribute has the following possible states:

no preload attribute
Preload is not specified.
From the spec, “Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.”
“Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.”
“Hints to the UA that optimistically downloading the entire video is considered desirable.”
preload or preload=''
The preload attribute is specified but no value is given. Specifying the empty string is the same as specifying “auto”.

I created an HTML5 Video test page based on Philippe’s test page. The test page includes a VIDEO tag. Clicking on the various test links changes the state of the PRELOAD attribute. JavaScript measures how much of the video is buffered. The entire video is 52.2 seconds long. The final result is the number of seconds that are buffered (preloaded).

In order to gather results across various browsers I connected the test page to a Browserscope user test and tweeted asking people to run the test page. (There were some race conditions in the test page that I resolved after an awesome realtime, tweet-driven debug session with voluntary testers. It was very cool.) A subset of major browsers is shown in Table 1. You can see the full results in Browserscope.

Table 1. Seconds of Video Preloaded
browser no preload attr preload ='none' preload= 'metadata' preload ='auto' preload ='' autoplay
Android 4 0 s 0 s 0 s 0 s 0 s 0 s
Chrome 26 25 s 0 s 25 s 25 s 25 s 52 s
Firefox 19 0 s 0 s 0 s 53 s 53 s 53 s
IE 9 2 s 0 s 2 s 52 s 52 s 52 s
IE 10 0 s 0 s 0 s 52 s 52 s 52 s
iPhone iOS6 0 s 0 s 0 s 0 s 0 s 0 s
Opera 12 10 s 0 s 10 s 53 s 53 s 53 s
Safari 6 52 s 0 s 0 s 52 s 52 s 52 s

Observation #1: Mobile devices don’t preload anything. The VIDEO spec calls the preload values “hints”, so it makes sense that mobile browsers would choose not to preload anything in order to save on data costs. Instead, the video doesn’t start downloading until the user initiates playback. When I saw this I decided to add a test for the AUTOPLAY attribute. As shown, that also does not cause any video download on mobile devices.

Observation #2: The amount of video preloaded varies across the major desktop browsers. Luckily, preload='none' has consistent behavior across all browsers: nothing is buffered. But all other values of PRELOAD vary in how much video data is downloaded. Chrome is aggressive about preloading, going so far as to buffer 25 seconds of video for preload='metadata'. However, it is less aggressive for preload='auto', stopping at 25 seconds while the other desktop browsers download the entire 52 seconds. Firefox 19 and IE 10 are generally less aggressive, buffering zero seconds for three of five preload states.

Observation #3: Browsers preload too much by default. Developers are most likely not going to specify any value for PRELOAD. As shown in Table 1, this situation results in IE 9 buffering 2 seconds of video, Opera 12 buffers 10 seconds, Chrome 26 buffers 25 seconds, and Safari 6 buffers the entire 52 seconds. The entire video is 4.2MB, so the amount of data downloaded is 0.2MB for IE9, 0.8MB for Opera 12, 2.0MB for Chrome 26, and the entire 4.2MB for Safari 6.

Looking at the Top 1000 URLs worldwide, only a handful use the VIDEO tag. Most sites are still using the Flash player, which has its own preloading behavior. But as use of the VIDEO tag increases, it would be good to determine how much video should be buffered for various values of preload, especially for the default case of no PRELOAD attribute. I suggest guidance be given to drive that to a lower number, possibly 5 to 10 seconds. If a developer wants to have the video preload, specifying PRELOAD is just an attribute away.

8 Responses to HTML5 Video Preload

  1. It would be nice if you could say preload=”10″ to preload a maximum of 10 seconds.

  2. Jared, I strongly disagree. A web developer has no information about the user’s connection speed, whereas the web browser does.

    Adequate values for the ‘preload’ attribute could probably be determined client-side, based on a number of simple heuristics; does the video element occupies most of the screen, or is it small? Is it the only video element on the screen, or one of several? Am I on 2G?

    The ‘preload’ attribute should only be used when the web developer knows those heuristics to be in error.

  3. When I set the attr preload=”auto” does this mean that browser wolud start to preload the video after all the web page is downloaded or this preloading process goes in parallel?

    By the way, great article!

  4. Nicola: It happens in parallel. Although one concern is that video files can be very large – so they may consume much of the available bandwidth causing other resources to download more slowly. A workaround would be to set the VIDEO SRC attribute later (eg, in window.onload) so that the video doesn’t contend with other resources.

  5. Did you happen to test how the browser reacts when you change the preload property via JS (i.e. initially setting it to ‘auto’ and then changing it to ‘none’ before the video is fully loaded). I am curious if it continues loading, or is smart enough to know to stop.

    If not, I can easily test it, but figured I would ask anyways. Great article, and thanks for the input.

  6. Hi, nice article !
    But I’ve got a question… Is there a way to completely load a video before playing it?
    Thanks !

  7. Ryan: I did not test changing the preload attribute via JS.

    Romain: The best alternative is preload=auto AFAIK.

  8. Thanks for the thoughtful article, Steve!

    I just performed some testing on Chrome 26.0.1410.64 (for 64-bit Vista), and I found the following:

    No preload, or ‘metadata’ => about 10 sec of buffering.

    For example, after the page first loads, the “Played time ranges” is empty, and the “Buffered time ranges” is 0-10.89 sec.

    After I play the first 19.8 secs, , the “Played time ranges” is 0-19.8 secs (as expected!), and the and the “Buffered time ranges” is 0-28.76 sec.

    I’m reading those values off the myVideo.buffered.length and myVideo.played.length JS variables

    My test video is about 8 mins (MP4)