98 Chapter 4—Video and Audio
We have nearly reached the end of our journey through the HTMLMediaElement inter-
face. The remaining attributes are:z Two boolean attributes for displaying if the browser is currently searching
for other data (seeking) or if the end of the stream has been reached
(ended)
z An attribute for giving information on the start time of the stream
(initialTime)
z An attribute that represents the current timeline offset as a Date object
(startOffsetTime)
z Three attributes for implementing the TimeRanges interface—buffered,
played, and seekable.The basic idea of TimeRanges is, as its name indicates, recording periods of time:interface TimeRanges {
readonly attribute unsigned long length;
float start(in unsigned long index);
float end(in unsigned long index);
};Using the example of played helps you understand how this works: If we are play-
ing the intro of the Big Buck Bunny video and then click Pause, we get a first time
range consisting of a start and an end time. The corresponding attributes are
played.start(0) and played.end(0), and the number of existing time ranges in
played.length is 1. If we then switch to the eighth chapter and continue playback
there for a bit, we create the next time range with played.start(1) and played.
end(1), and the played.length becomes 2. If two time ranges should overlap,
they are combined into one. All ranges are sorted in the TimeRanges object.
This way we can track which areas of a media stream are buffered, played,
or marked as seekable. A little online example helps visualize the individual
TimeRanges while playing the Big Buck Bunny video—take a look at http://
html5.komplett.cc/code/chap_video/js_timeRanges.html.4.7.9 The Long List of Media Events
The list of events fired on loading or playing of a media stream at certain times
is long and basically reflects the three main status conditions of the HTMLMedia-
Element interface.