Getting the value of buffering progress in an HTML5 video player

Question

In Firefox, when I see a simple video element in this example , it has default browser controls. Immediately after loading the page, the video starts to load; I see how the buffering (loading) line moves to the right side of the default browser controls.

How can I get this value for a buffer?

I have tried several different ways, including video.bufferedand progress event listenerwith e.total, e.loaded.

I have Firefox 3.6.3, which does not seem to support .bufferedor .total / .loaded.

How do browser controls initialize this buffering process by default?

By the way, I have other examples of different HTML5 players that perform the same actions as the default browser controls:

• http://sublimevideo.net/demo
• http://videojs.com

Answer 1

See the source in this example:

http://people.mozilla.com/~cpearce/buffered-demo.html

Essentially, you need to get your control and check its “buffered” property.

var v = document.getElementById('buffered_v');
var r = v.buffered.end(0);

This should be your buffer value.