Customizing Media Elements - HTML5 Media - page 61

control and displaying the custom control can be distractingly visible to the user. If you don't
want to add a scripting block into the web page body, you should use the document's DOMCon-
tentLoaded event handler instead of window.onload . The document's DOMContentLoaded
event is fired when the DOM is ready, but before external resources—such as video files and
images—are loaded. In the examples in this chapter, I use the DOMContentLoaded event to
trigger a function, setupControl , and then keep all of the script within the head element.
NOTE
You can also code the function right in the DOMContentLoaded addEventListener call, rather
than define it separately. Since I refer to the function by name several times in the chapter, I've
defined it separately.
In the setupControl function, you'll also want to add code that tests whether the user agent
supports the video object's canPlayType property. If it can, the new control is displayed, and
the controls attribute on the video element is removed. Since it makes no sense to add the
button event handler functions if the buttons aren't displayed, the code to set these is also con-
tained within this conditional block:
document.addEventListener("DOMContentLoaded", setupControl,
false);
function setupControl() {
// video fallback
var bbVideo = document.getElementById("videoobj");
if (bbVideo.canPlayType) {
// remove default controls
bbVideo.removeAttribute("controls");
// display custom controls
document.getElementById("controls").style.display="block";
// events for buttons
document.getElementById("start").
addEventListener("click",startPlayback,false);
document.getElementById("stop").
addEventListener("click",stopPlayback,false);
document.getElementById("pause").
addEventListener("click",pausePlayback,false);
}