Friday 6 August 2010

Buffered attribute landed for HTML5 video

Last night I landed support for the buffered HTML5 video attribute in Firefox. This is cool because we can now accurately determine which time-segments of a video we can play and seek into without needing to pause playback to download more data. Previously you could only get the byte position the download had reached, which often doesn't map to the time ranges which are playable very well, especially in a variable bit rate video. This also can't tell you if there are chunks which we skipped downloading before the downloaded byte position. Once the video controls UI is updated, users will be able to know exactly which segments of their video are downloaded and playable and can be seeked into without pausing playback to download more data.

To see this in action, download last night's Firefox nightly build or later, and point your browser at my  video buffered attribute demo. You'll see something like the screenshot below, including an extra progress bar (implemented using canvas) showing the time ranges which are buffered.


I've implemented the buffered attribute for the Ogg and WAV backends. Support for the buffered attribute for WebM is being worked on by Matthew Gregan, and is well underway. At the moment we return empty ranges for the buffered attribute on video elements playing WebM and raw video.

My checkin just missed the cutoff for Firefox 4 Beta 3, so the first beta release that the video buffered attribute will appear in is Firefox 4 Beta 4.


mike said...

Really cool. This will also help for video editing type applications as well. Although it would be nice if you could tell the element to "stop" buffering' (instead of reading time ranges then pausing and seeking to the end, and having no throttle during playback. )... But I suppose that level of buffer control will have to wait for temporal media fragments spec.

Right now I am doing a lot of hidden pause / play requesting to 'discover' this information, having it be queryable via the buffered attribute will make life much easier.

Fritz said...

There seems to be one issue to me. The video box itself has an error which your black bar solves. Example:

You have a video of 50 seconds and you've buffered t1-t10 and t25-t35. The buffered bar shows this visually but the video box bar only shows that you have 40% of the video downloaded--not which segments are buffered and therefore clickable without loading. Great work on getting this implemented, I imagine it's only a UI fix (reported on the 8/8/2010 nightly, but that bug isn't closed so many more has to land).

Chris Pearce said...

@Fritz: The video controls currently show the proportion of the resource downloaded, they don't use the buffered attribute to show which time ranges are buffered. The video controls need to be reworked to take advantage of the buffered attribute. It's not a trivial rework, as they use a XUL "progress" widget, which can only show a single buffered range, it can't show multiple ranges.