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

Answer 1

If your primary concern is getting the video to play sooner, you can start buffering sooner by using the preload attribute.

<video controls preload="auto">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Answer 2

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

Answer 3

There's been a lot of discussion in the comments regarding whether this can be done, so I'll provide a Media Source-specific answer here.

Media Source Extensions, or MSE, are a new (and not yet widely-supported) set of tools to help you control buffering and streaming with HTML5 videos. From the W3C abstract:

This specification extends HTMLMediaElement to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

I'll specifically refer you to the SourceBuffer Object, which has information on how audio & video track buffering is handled.

Support for MSE varies by browser and format (source):

• Chrome for Desktop 34+ (MP4, WEBM)
• Chrome for Android 34+ (MP4, WEBM)
• IE 11+ on Windows 8.1 (MP4)
• IE for Windows Phone 8.1+ (MP4)
• Safari for Mac (MP4, TS)

Support for Firefox can be turned on by the user in about:config (source). Support has been in the works for some time.

There is much more that needs to be implemented in order to make use of this effectively, including video file clustering. I would recommend reading this 4-part series that goes step by step into how to create a fully functional HTML5 video player utilizing everything mentioned above.