Buffering API

This page lists JavaScript API support for getting the buffered attribute and for listening to the progress event. We test against the following expectations:

  1. The buffered attribute should return the range(s) of the video that are buffered.
  2. The progress event should frequently fire while the buffered range(s) are changing.
  3. When the buffer is running empty, an event should get fired to indicate this is happening.

This page also includes a test to determine what happens when a buffer underrun happens. In order to determine if a specific event is fired in response to this, the test listens to the events loadeddata, progress, waiting, stalled, suspend, playing, canplay and canplaythrough. Unfortunately, no clear pattern in broadcasting of these events could be found.

Results

Browserbuffered rangeprogress eventbuffer underrun
Firefox 20multiple rangesfrequently sentWaiting event; playback stalls
Chrome 26single rangefrequently sentNo event; stuttering playback
Safari 6single range 1frequently sentWaiting event; playback restarts
Internet Explorer 9single range 2frequently sentNo event; stuttering playback
Internet Explorer 10single range 2frequently sentStalled event; playback restarts
Opera 11.5multiple rangesfrequently sentNo event; playback stalls
iOS 4 (iPod)single range 2frequently sentStalled event; video pauses
iOS 5 (iPad)single range 2frequently sentStalled event; video pauses
iOS 6 (iPad)single range 2frequently sentStalled event; video pauses
Android 2.2 (HTC Legend)--No event; playback stalls 3
Android 2.3 (HTC Desire)--No event; playback stalls 3
Android 4.0 (Galaxy S2)--No event; playback stalls 3
Android 4.1 (Nexus 7)single range 2frequently sentNo event; playback stalls 3
WinPho 7.5 (Lumia 800)--No event; playback stalls
  1. Seeking to a not-yet-buffered part is denied.
  2. Only one buffered range (the most recent one) is available.
  3. Media rendered ignores proxy, hence no way to test underruns.

See the W3C video spec for more details on the media elements API.

Test Tag

Here's a video tag with some javascript operators for testing. The tag uses the preload=none attribute:



clear log





The buffer underrun test is performed using a proxy tool (like Charles). First, video buffering is throttled for a while with 2000 kbps. Next, throttling is set to 200 kbps until the video buffer is emptied. After that has happened, throttling is set to 2000 kbps again.