HTML and CSS Reference
In-Depth Information
Event
Description
Signals a change in the current playback position.
timeupdate
Triggered when the volume is changed.
volumechange
Playback has stopped because the next frame is not available, but the user agent expects it
to become available.
waiting
In addition to capturing the
timeupdate
event and assigning an event handler function, we'll
need to set the
progress
element's
max
attribute to the length of the media resource in order
to ensure the progress is measured correctly. We could hardcode the length of the video dir-
ectly in the attribute, but in this example, we'll access the length of the video using the media
element's
duration
property.
The code to grab the new HTMLMediaElement event and set the
progress
element's
max
value, as well as display the
progress
element, is included in the same code block that pre-
viously displayed the custom control and removed the
controls
attribute. The conditional
block now looks like the script shown in
Example 17
.
Example17.Thedocument'sDOMContentLoadedsetupControlfunctionsettingupapage
for custom control
// setup for video playback
var bbVideo = document.getElementById("videoobj");
if (bbVideo.canPlayType) {
// remove default controls
bbVideo.removeAttribute("controls");
// display custom control and feedback bar
document.getElementById("controls").style.display="block";
document.getElementById("feedback").style.display="block";
// add timeupdate event handler
bbVideo.addEventListener("timeupdate",reportProgress,false);
// set max value of progress
var progressObj = document.getElementById("progressBar");
if (progressObj && progressObj.value == 0) {
document.getElementById("feedback").style.display="block";
progressObj.max=parseInt(bbVideo.duration);
}
// set buttons based on playback