The HTML5 video progress event: Redux

In my first post on HTML5 video and its progress event, I wrote:

Only Firefox provides a means to calculate the amount of the video that has been loaded. The progress event object includes total and loaded properties that reflect the total size of the video file, and the amount the browser has retrieved from the server. This is also a reflection of how each browser handles video downloads.

Erm, that's only sort of true. As zcorpan explained in the comments, the latest version of Firefox implements an old version of the specification.

In the most recent version of the HTML5 spec, the total and loaded properties of the progress event were removed and (mostly) replaced by the video.buffered property.

So while Firefox 3.6.x is still the only browser that provides total and loaded properties in the progress event, the latest revision added a new property to the video element that works similarly — note the emphasis on ‘similarly.’

What's the difference? Both the total and loaded properties of the progress event express the download's progress in terms of bytes. The video.buffered property expresses the download's progress in terms of seconds. They're similar in that you can determine the status of a download, but using seconds instead of bytes is more relevant for seeking within a timed media file.

By checking video.buffered.end(), we can determine how many seconds of the video are available to the browser and provide the relevant error handling (if a user seeks too far) or interface changes (such as a loading progress bar).

I am still learning how the video.buffered property works, particularly in conjunction other properties and events of the video object. I will post more about this later.

One thing to remember: Firefox has not yet implemented the video.buffered property. It is only available in Safari, Chrome and (sort of) in Opera (still learning the ins-and-outs). (And Internet Explorer doesn't support the video element at all, though version 9 should when it's released.)