HTML 5 Video MP4到画布透明

Question

我设法制作了一个透明的html5视频，绘制在画布上。问题在于，从视频中绘制画布是有间隔的，它一遍又一遍地重复相同的功能以保持动画循环，并且因为整个网站都比较滞后。有办法解决吗？

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();