Customizing Media Elements - HTML5 Media - page 78

The endPlayback function is the function that resets the buttons, as well as the playback in-
dicator and turns up the house lights. It's triggered by the ended event when the video play-
back is finished. It's also called directly in the stopPlayback method.
The reason we have to separate the two functions is that the video playback is automatically
halted when the playback is finished. In addition, the currentTime value is also automatically
reset back to zero—we don't need to reset the value. In fact, resetting currentTime to zero in
Firefox after the video is finished triggers the video to start playing again.
However, both events—stopping the video by clicking the Stop button, and the video ending
naturally—require the same cleanup with the custom controls. This cleanup is contained in
the endPlayback function. Example 20 shows the three button functions, as well as the new
endPlayback function.
Example20.Custom button controls and clean up function for video ending
// start video
function startPlayback() {
document.getElementsByTagName("body")[0].style.backgroundColor="#664c58";
document.getElementById("videoobj").play();
}
// pause video
function pausePlayback() {
document.getElementById("videoobj").pause();
}
// pause video, reset to currentTime of zero
// call function to clean up
function stopPlayback() {
// reset video
var bbVideo = document.getElementById("videoobj");
bbVideo.pause();
bbVideo.currentTime=0;
endPlayback();
}
// pause video, reset to currentTime of zero
// call function to clean up
function stopPlayback() {
// reset video
var bbVideo = document.getElementById("videoobj");
bbVideo.pause();
bbVideo.currentTime=0;