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
the total and loaded properties of the progress event were removed and
(mostly) replaced by the
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
loaded properties of the
progress event express the download's progress in terms of bytes.
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.
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.)