HTML5 Media Element - Difference between SEEKABLE and BUFFERED?

Question

I was wondering what is the difference in HTML5 media elements between the media.seekable and media.buffered?

Answer 1

I believe the previously accepted answer actually does not clarify the question so even this late it may be worth telling.

The TimeRanges object Buffered states the start and end of content that has been downloaded (and still is kept). The TimeRanges object Seekable states the start and end of content that is currently playable, even if it is not downloaded. Seekable is calculated once the first media data has been appended in the media resource, then, it can inform on all content that is available (this will depend on how much info the Media Resource is able to extract). Duration can be modified through the video element object.

There is yet another TimeRanges object called Played which is easier to grasp as it contains the ranges that have already been played.

Further read on https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

Answer 2

Seekable is the time range that a user can seek to, allowing you to select a specific time in the media content. https://developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video

Buffered returns a time range that allows you to know how much of the video has buffered when the media.buffered property is accessed. https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement

The last page also has a table that outlines browser compatibility for the seekable and buffered properties.

Hope this helps!