gistfile1.js

var video = document.getElementById("video");
var c1 = document.getElementById("roundy");
var ctx = c1.getContext("2d");

$('#button').click(function(){
   video.play(); 
});

video.addEventListener("play", function() {
     timerCallback();
}, false);

var timerCallback = function() {
    if (video.paused || video.ended) {
      return;
    }
    computeFrame();

    setTimeout(function () {
        timerCallback();
    }, 0);
};

var computeFrame = function() {
    
   var w = video.width;
   var h = video.height;
   var r = 20;

   ctx.clearRect(0,0,w,h);

   roundRect(ctx, 0,0,w,h,r,true,false);
   ctx.drawImage(video, 0, 0, w, h);
 
   return;
}
    
/**
 * Draws a rounded rectangle using the current state of the canvas. 
 * If you omit the last three params, it will draw a rectangle 
 * outline with a 5 pixel border radius 
 * @param {CanvasRenderingContext2D} ctx
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate 
 * @param {Number} width The width of the rectangle 
 * @param {Number} height The height of the rectangle
 * @param {Number} radius The corner radius. Defaults to 5;
 */
function roundRect(ctx, x, y, width, height, radius) {
  if (typeof radius === "undefined") {
    radius = 5;
  }
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  ctx.clip();      
}