Customizing Media Elements - HTML5 Media - page 80

var barwidth = 500;
var sliderwidth = 30;
// pct of playback * width
var time = Math.round(this.currentTime);
var duration = parseInt(this.duration);
var position = barwidth * (time / duration);
if (isNaN(position)) return;
// position butterfly
var butterfly = document.getElementById("butterfly");
if (position <= (barwidth - Math.round(sliderwidth / 2))) {
butterfly.style.left=position + "px";
} else {
butterfly.style.left=barwidth - Math.round(sliderwidth / 2);
}
}
When the web page reader plays the video, the custom progress bar reflects the percentage of
video loaded, while the butterfly reflects the current playback. Figure 18 shows the applica-
tion running in IE10, with the video partially loaded and partially played.
Both the progress bar and playback indicator work in all browsers except Opera 11.5. The in-
dicator works with Opera, but at the time this was written, Opera had not yet implemented
the buffered property in the released version of Opera. The buffered property is supported,
however, in Opera.next (Opera 12). In addition, Chrome won't trigger the progress event on
the video if it already has the video cached. When you click the pause or stop button, it does
fire the progress event once, and the bar is updated to show that the file is 100% cached.
However, it doesn't fire the progress event when you click play . To test the progress bar in
Chrome, you'll need to clear your cache first.