I was wondering what is the difference in HTML5 media elements
between the media.seekable and media.buffered?
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