html - 如何创建带有 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 计算机的“Leopard”版本的 OS X 中找到了多次引用 Apple 计算机关于更新 QuickTime 的 2006 年报价：

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。