HTML and CSS Reference
In-Depth Information
}
}
Since not every user agent that supports the video element also supports the progress ele-
ment, the progress tracking function also provides a text fallback for that element. The text
doesn't show if the progress element is supported.
Lastly, when the reader stops the video, they'll assume that the progress meter will be reset
to zero. We'll need to add this code to the stopPlayback event handler function:
// stop video, return to zero time
// enable play, disable pause and stop
function stopPlayback() {
// reset progress bar
var progressObj = document.getElementById("progressBar");
if (progressObj && progressObj.max){
progressObj.value=0;
}
var bbVideo = document.getElementById("videoobj");
bbVideo.pause();
bbVideo.currentTime=0;
document.getElementById("start").disabled=false;
document.getElementById("pause").disabled=true;
this.disabled=true;
}
To finish version two of our custom control, we'll add a little CSS style to our video element
and its new custom controls. The video element is styled using the same stylesheet setting
shown in Example 10 . Since the custom controls can now be individually styled, we'll add the
same style setting for them as we did for the video element—rounded corner, linear-gradient
background, and subtle box shadow:
#start, #stop, #pause
{
border: 1px solid #ccc;
padding: 5px;
border-radius: 10px;
}
/* gradients and color backgrounds */
#videoobj, #start, #stop, #pause
{
/* add regular background */
background-color: #ffcccc;
Search WWH ::




Custom Search