javascript - Make an html5 video buffer less before playing

Question

When someone clicks to watch a video on my site (mp4 in an Html5 video tag) - the browser buffers a lot of it before showing it. This is not needed - the video is less than half a minute long, and has shown only half of it by the time the whole video has been downloaded.

Is there a way to tell browsers not to buffer so much?

Answer 1

Is there a way to tell browsers not to buffer so much?

The buffering process is initially controlled completely by the client ^* (see update below on how this can be controlled programatically) and we can only hint to it what we need using the preload attribute.

Using preload = "auto" (or just a blank string) indicates to the browser that it is likely that the video will be played completely:

Even with this the client can override it if it finds it necessary. source

Update

*) There is up and coming Media Source Extension (thanks @Tim McClure) which do allow programmatic control of buffering. The support varies - source:

• Internet Explorer from version 11 on Windows 8 (MP4). (2013 October)
• Google Chrome since early 2013, also on Android (MP4, WEBM).
• Safari 8 on OS X (MP4, TS).

It can be enabled in Firefox under flags (about:config).

For more details on how to use this, see this longer four part series (from Tim McClure in comments).

Specification details