Video buffer visualizer

HTML

<video id="vid" width="500" height="280" autoplay="true">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
            <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<br />
<canvas id="canvas" width="500" height="16"></canvas>
<br>
<button id="playButton">Play</button><button id="pauseButton">Pause</button>

JavaScript

var vid = document.getElementById('vid');
var playButton = document.getElementById('playButton');
var pauseButton = document.getElementById('pauseButton');
var canvas = document.getElementById('canvas');

function drawProgress(canvas, buffered, duration) {
	  // I've turned off anti-aliasing since we're just drawing rectangles.
    var context = canvas.getContext('2d', { antialias: false });
    context.fillStyle = 'blue';
    
    var width = canvas.width;
    var height = canvas.height;
    if(!width || !height) throw "Canvas's width or height weren't set!";
    context.clearRect(0, 0, width, height); // clear canvas
    
    for(var i = 0; i < buffered.length; i++){
      var leadingEdge = buffered.start(i) / duration * width;
      var trailingEdge = buffered.end(i) / duration * width;
      context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height);
    }
}

vid.addEventListener('progress', ()=> {
	console.log("Progress event fired.");
	drawProgress(canvas, vid.buffered, vid.duration);
}, false);
canvas.onclick = (mouseEvent)=>{
	console.log("Manual seek attempted.");
	vid.currentTime = (mouseEvent.clientX - 5) / canvas.width * vid.duration;
}
playButton.addEventListener('click', ()=> vid.play(), false);
pauseButton.addEventListener('click', ()=> vid.pause(), false);