Java Reference
In-Depth Information
This in and of itself isn't exactly a problem; after all, the best user interfaces have redundancies. It
becomes problem when your custom UI doesn't accurately portray the actual state of the media.
Refer back to Figure 15-6. The context menu says Play whereas the custom Play/Pause button says
Pause. Ideally, both the context menu and the custom UI should be in sync, and you can do that by
listening for certain events.
events
Events are the lifeblood of graphical applications, and media‐based events are no exception. The
folks behind the HTML5 specification did a very thorough job of defining the events web developers
need to write robust media‐driven pages and applications.
As you might suspect, there are a lot of events, and you can view the complete list in Appendix C.
The following table, however, lists just a few.
event name
desCription
Fires when playback is aborted
abort
Sent when enough data is available to play the media
canplay
Indicates that the entire media can be played through without interruption
canplaythrough
The media's metadata has changed, indicating a change in the media's duration.
durationchange
Fires when playback completes
ended
Sent when an error occurs
error
Downloading has begun.
loadstart
Fires when playback is paused
pause
Sent when the media starts or resumes playing
playing
Downloading is in progress.
progress
Fires when the playback speed changes
ratechange
Seeking has ended.
seeked
Fires when playback is moved to a new position
seeking
The currentTime property has changed.
timeupdate
Either the volume property or muted property has changed.
volumechange
You register listeners for these events exactly like you would any other standard event: with
addEventListener() . For example, you can execute code when the media is paused by listening for
the pause event, like this:
function mediaPaused(e) {
alert("You paused the video!");
}
 
video.addEventListener("pause", mediaPaused);
 
Search WWH ::




Custom Search