如何使用HTML5画布创建一个带Alpha通道的h264视频？

我一直对这个演示感兴趣： http://jakearchibald.com/scratch/alphavid/

我也在这里看到这个问题：

Can I have a video with transparent background using HTML5 video tag?

但我似乎无法弄清楚：您如何使用Alpha通道创建h264,ogg和webm视频文件？

解决方法

如果您从 your demo开始使用QuickTime,您将看到一个带有独立RGB和A区域的视频：

如果然后查看演示的代码,您将看到它正在使用一个非屏幕HTML5画布来绘制每个视频帧,从该画布的下半部分读取Alpha像素,以在然后使用putImageData将结果推送到实际显示视频的另一个HTML5 Canvas.

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

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

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

  output.putImageData(image,height);
}

加上整个网络的各种声明,H.264不支持alpha,我几乎确信H.264不能有alpha.我说这个是因为我发现多次引用这个2006年苹果计算机引用的更新的QuickTime在他们的“豹”版本的OS X：

QuickTime’s plumbing is receiving significant upgrades in Leopard. There have been significant enhancements in handling the H.264 encoding. Also,transparent alpha layers,an optional part of the H.264 specification,are now supported in H.264-based QuickTime movies. And finally,QuickTime supports 64-bit.

然而,我发现与这个营销报价相关的唯一的事情是this document显示了如何改变QuickTime Pro中视频图层的整体不透明度.