HTML and CSS Reference
events that fire as the media is loading. The events fired during the loading of a media file
are listed in table 8.3 (all of them will fire during the loading of the media).
Table 8.3. Media element events
The browser has determined the duration and dimensions of the media resource and the
text tracks are ready.
The browser can render the media data at the current playback position for the first time.
The browser can resume playback of the media but estimates that if playback were to be
started, the media couldn't be rendered at the current playback rate up to its end, without
having to stop for further buffering of content.
The browser estimates that if playback were to be started, the media could be rendered at
the current playback rate all the way to its end, without having to stop for further buffer-
If you were loading a large media file across the network, then you'd have time to display
a notification to the user as each of these events occurred. In this section you'll bind event
listeners to each of these events and start the playback on canplaythrough . But first,
let's look at the network-related information available through the HTMLMedia-Element
Determining the state of media resources with .networkState and .readyState
The HTMLMediaElement interface includes two useful properties that allow you to de-
termine the state that the media resource is in: .networkState and .readyState .
In a real application you could use the information provided by these properties to give
visual feedback about the state of the loading media resource; for example, a progress
bar or a loading spinner. Table 8.4 lists the values each property can assume. The .net-
workState is similar to the .readyState property on the request object in an
XMLHTTPRequest and the media .readyState corresponds closely to the events lis-
Table 8.4. HTMLMediaElement interface properties and values
Returns the current network state of the element; the value returned is one of the four
Numeric value: 0 (no data yet).