<div id="player">
    <video id="vid" controls="" width="320" height="180">
        <source src="media/kitchen.mp4" type="video/mp4">
        <source src="media/kitchen.webm" type="video/webm">
    </video>
</div>
<button id="btn" class="btn btn-mini push-down-top">Get Thumbnail</button>
<div id="thumbs" class="push-down-top"></div>
<canvas id="canvas" class="hidden" width="320" height="180">
    <p>Your browser does not support the canvas element.</p>
</canvas>
/* none */
var
  video = document.querySelector('#vid'),
  canvas = document.querySelector('#canvas'),
  context = null,
  btn = document.querySelector('#btn'),
  thumbs = document.querySelector('#thumbs'),
  thumbInterval = null;

if (Modernizr.canvas) {
  context = canvas.getContext('2d');

  var width =
        video.width =
        canvas.width =
        video.offsetWidth = 320;

  var height =
        video.height =
        canvas.height =
        video.offsetHeight = 180;

  var getThumb = function() {
        var thumb;
        context.drawImage(video, 0, 0, width, height);
        thumb = new Image();
        thumb.src = canvas.toDataURL('image/png');
        thumb.width = 60;
        thumbs.appendChild(thumb);
  };

  btn.addEventListener('click', getThumb);
}