HTML and CSS Reference
In-Depth Information
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
Event
Occurs when
The browser has determined the duration and dimensions of the media resource and the
text tracks are ready.
loadedmetadata
loadeddata
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.
canplay
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-
ing.
canplaythrough
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
interface.
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
Property/values
Description
Returns the current network state of the element; the value returned is one of the four
shown next.
.networkState
NETWORK_EMPTY
Numeric value: 0 (no data yet).
