Customizing Media Elements - HTML5 Media - page 70

bbVideo.addEventListener("play",function() {
document.getElementById("start").disabled=true;
document.getElementById("pause").disabled=false;
document.getElementById("stop").disabled=false;
}, false);
bbVideo.addEventListener("pause", function() {
document.getElementById("start").disabled=false;
document.getElementById("pause").disabled=true;
}, false);
// events for buttons
document.getElementById("start").
addEventListener("click",startPlayback,false);
document.getElementById("stop").
addEventListener("click",stopPlayback,false);
document.getElementById("pause").
addEventListener("click",pausePlayback,false);
}
}
The extended test for the progress element (highlighted) is necessary for the code to work in
Safari/Webkit Nightly and Firefox 5, since neither supports the progress element, but behave
differently towards the element in JavaScript. Safari/Webkit Nightly throws an error if you
attempt to access the value attribute on the progress element. Firefox 5 doesn't support the
progress element either, but it doesn't return a false value if you just test for the existence of
the element. You first need to test for the progress object and then the value property, to get
a proper response from both Firefox 5 and Safari 5 (not to mention all the other browsers and
their assorted versions and version quirks).
Next we need to code the new event handler function. This function accesses the cur-
rentTime attribute to get the current playback position, and uses the value to update the pro-
gress element:
// update progress
function reportProgress() {
// set progress element's value
var time = Math.round(this.currentTime);
var progressObj = document.getElementById("progressBar");
if (progressObj && progressObj.max) {
progressObj.value = time;
} else {
// provide text fallback
document.getElementById("prog").textContent=time + "
seconds";