如何创建带有 alpha 通道的 h264 视频以用于 HTML5 Canvas？

Posted 2023-05-07

【中文标题】如何创建带有 alpha 通道的 h264 视频以用于 HTML5 Canvas？

【英文标题】：How to create an h264 video with an alpha channel for use with HTML5 Canvas?

【发布时间】：2011-06-30 16:03:34

【问题描述】：

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

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

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

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

【参考方案1】：

如果您使用 QuickTime 从 your demo 打开 this video，您将看到一个具有单独 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 位。

然而，我发现与此营销报价相关的唯一内容是 this document 展示了如何在 QuickTime Pro 中更改视频层的整体不透明度。

【讨论】：

嗨@Phrogz，谢谢你，我开始明白了。但这是另一个问题。我不是 javascript 专家，所以如果这很明显，我深表歉意，但这就是我认为发生的事情：for 循环遍历图像数据数组的每个第 4 个元素，which apparently represents the alpha channel，前三个是R、G 和 B。但你是说这个演示创建了没有实际 Alpha 通道的 Alpha 数据，对吗？

@chuls 正确：ImageData 对象的data 属性是一个称为CanvasPixelArray 的平面数组结构，它具有串联的所有RGBA 值。上面的脚本从图像下半部分的蓝色通道中获取值，并将它们用作上半部分的 alpha 值。然后它将每个帧创建的这个新的带有 alpha 的图像复制到输出。

非常感谢您的帮助，我终于明白这里发生了什么。

【参考方案2】：

WebM 现在确实支持透明度，Chrome 29+ 可以在没有标志的情况下播放它。

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

但它不适用于 android 版 Chrome。