如何使用alpha通道创建h264视频以与HTML5 Canvas一起使用？

Question

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

我在这里也看到了这个问题:

我可以使用HTML5视频标签制作透明背景的视频吗？

但我似乎无法弄清楚:你如何用alpha通道创建h264,ogg和webm视频文件？

Answer 1

如果您使用QuickTime 从演示中打开此视频,您将看到一个包含单独RGB和A区域的视频:

然后,如果您查看演示的代码,您将看到它使用一个屏幕外HTML5 Canvas绘制每个视频帧,从该画布的后半部分读取alpha像素以设置显式的每像素alpha值.上半部分,然后使用putImageData将结果推送到另一个实际显示视频的HTML5 Canvas.

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 += 4){
    imageData[i] = alphaData[i-1];
  }

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

再加上整个网络上的各种声明,H.264不支持alpha,我几乎有信心H.264不能拥有alpha.我之所以这么说,是因为我发现Apple计算机2006年引用了关于OS X的"Leopard"版本中更新的QuickTime的多个引用:

QuickTime的管道正在接收Leopard的重大升级.在处理H.264编码方面有了显着的改进.此外,基于H.264的QuickTime电影现在支持透明alpha层,这是H.264规范的可选部分.最后,QuickTime支持64位.

然而,我发现与此营销报价相关的唯一内容是此文档显示如何在QuickTime Pro中更改视频图层的整体不透明度.

Answer 2

WebM现在支持透明度,Chrome 29+可以在没有标志的情况下播放.

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

但它不适用于Android版Chrome.