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
Search WWH ::




Custom Search