HTML 5 Video MP4 to canvas transparent

I've managed to make a html5 video, transparent, drawn to canvas. The problem is that the drawing of the canvas from the video is with interval, which repeats the same function over and over again to keep the animation looping, and because of that the whole website is laggy. Is there a way to fix that?

var outputCanvas = document.getElementById('output'),
  output = outputCanvas.getContext('2d'),
  bufferCanvas = document.getElementById('buffer'),
  buffer = bufferCanvas.getContext('2d'),
  video = document.getElementById('video'),
  width = outputCanvas.width,
  height = outputCanvas.height,
  interval;

function processFrame() {
  buffer.drawImage(video, 0, 0);

  var image = buffer.getImageData(0, 0, width, height),
    imageData = image.data,
    alphaData = buffer.getImageData(0, height, width, height).data;

  for (var i = 3, len = imageData.length; i < len; i = i + 4) {
    imageData[i] = alphaData[i - 1];
  }

  output.putImageData(image, 0, 0, 0, 0, width, height);
}

video.addEventListener('play', function() {
  clearInterval(interval);
  interval = setInterval(processFrame, 50);
}, false);

video.addEventListener('ended', function() {
  video.play();
}, false);

video.play();