I noticed that when a html5 video is loading (buffering), it's buffered.length value is 2, and when it finish loading, it changes to 1.

Would this be a reliable way to know if a video is already stored in the cache (buffered.length == 1)? If not, am I missing something? Could someone explain me exactly what does this value tell me?

I noticed that when a html5 video is loading (buffering), it's buffered.length value is 2, and when it finish loading, it changes to 1.

Would this be a reliable way to know if a video is already stored in the cache (buffered.length == 1)? If not, am I missing something? Could someone explain me exactly what does this value tell me?

• javascript
• jquery
• html
• html5-video

4 Answers 4

According to the Apple HTMLMediaElement documentation, buffered is TimeRanges

which is why the length property seems to be wrong

the buffered percentage can be calulated by using

video.buffered.end(0) / video.duration

As I understand it, buffered returns a TimeRanges object with data about how much of the video or audio has been buffered.

buffered has three attributes: length, start, and end.

length returns how many "parts" of the media are being buffered.

Apparently, under normal circumstances, buffered.length returns 1.

This is what Opera says about it:

In normal cases, there will only be one range — the browser starts downloading from time 0, and the downloaded range extends to however much is currently available. However, if the user seeks forward, the browser can stop the current download and start a new request for a later part of the video. In this case, there would be two ranges of buffered data.

*Source (Scroll down or search buffered)

My guess is this is not a reliable way to tell if the video is cached.

Full line of code, where # is an integer:

document.getElementById("videoId").buffered.start(#);

document.getElementById("videoId").buffered.end(#);

document.getElementById("videoId").buffered.length;

If something is cached, shouldn't it load straight away? Hence video.buffered.end(0) once the cached video starts will automatically be the end of the video?

Someone feel free to correct me or confirm this.

Note: end() requires a parameter. This parameter returns the value for the defined buffered vid. eg. If a video of 60 seconds starts, start(0) is 0 and end(0) progressively gets larger. If you change the position of the video to 30 seconds, start(1) bees 30 seconds and end(1) progressively gets larger from 30 seconds.

Unfortunately I have found mobile Safari on iOS 10.2.1 always seems to return a value of 1 for .length. Due to this, I suspect support is not consistent across browsers. This is made worse in Firefox 51.0.1 (which should have better support for these methods) which increments .length by 1 and then shortly after decrements it again. I suspect this 'might' be being caused by Firefox bining two buffered sections of the vid together. Due to the reasons above, I would try and find another way to determine how to detect if a video is cached.

Try entering in the URL for Chrome & Firefox:

about:cache

For some websites, video.buffered corresponds to the browser cache one by one, but for some websites, the browser video cache has been cleared, and the corresponding video.buffered has not changed.

I tested these two sites:

1. pletely played the video
2. confirm video.buffered.start(0)==0, video.buffered.end(0)==video.duration
3. disconnect the network and drag the video progress bar

result: The video of the first website can be played pletely, but the video of the second website cannot be played pletely

Over time, the cache situation may have more plex changes