html - 如何创建带有 alpha channel 的 h264 视频以用于 HTML5 Canvas？

Question

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

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

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

但我似乎无法弄清楚:如何创建带 alpha channel 的 h264、ogg 和 webm 视频文件？

Answer 1

如果你打开this video来自 your demo使用 QuickTime，您将看到具有独立 RGB 和 A 区域的视频:

如果您随后查看演示代码，您会发现它使用一个屏幕外 HTML5 Canvas 绘制每个视频帧，从该 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 中找到了 2006 年关于更新 QuickTime 的引用:

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 中更改视频层的整体不透明度。