Getting buffering progress value in HTML5 video player

Question

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

How can I get this value for the buffer?

I have tried a number of different ways, including video.buffered and progress event listener with e.total, e.loaded.

I have Firefox 3.6.3, which doesn't seem to support .buffered or .total / .loaded.

How do the default browser controls initialize this buffering progress?

By the way, I have other examples of different HTML5 players, which do the same as the default browser controls:

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

Answer 1

View the source at this example :

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

Essentially, you need to get your control and check the "buffered" property of it.

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

That should be your buffered value.