Html 如何创建带有 alpha 通道的 h264 视频以与 HTML5 Canvas 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5055962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an h264 video with an alpha channel for use with HTML5 Canvas?
提问by chuls
I've been interested in this demo: http://jakearchibald.com/scratch/alphavid/
我对这个演示很感兴趣：http: //jakearchibald.com/scratch/alphavid/
I also saw this question on here:
我也在这里看到了这个问题：
Can I have a video with transparent background using HTML5 video tag?
But I can't seem to figure out: How do you create h264, ogg and webm video files with alpha channels?
但我似乎无法弄清楚：您如何使用 alpha 通道创建 h264、ogg 和 webm 视频文件？
回答by Phrogz
If you open this videofrom your demowith QuickTime you will see a video with separate RGB and A regions:
如果您使用 QuickTime从演示中打开此视频，您将看到具有单独 RGB 和 A 区域的视频：
If you then look at the code for the demo, you will see that it is using one offscreen HTML5 Canvas to draw each video frame to, reading the alpha pixels from the second half of that canvas to set explicit per-pixel alpha values in the first half, and then using putImageDatato shove the result to another HTML5 Canvas which is actually displaying the video.
如果您随后查看演示的代码，您将看到它使用一个屏幕外 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);
}
Coupled with various statements throughout the web that H.264 does not support alpha and I almostfeel confident that H.264 cannot have alpha. I say this because I find multiple references to this 2006 quote from Apple computer regarding updated QuickTime in their "Leopard" release of OS X:
再加上整个网络上的各种声明 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.
QuickTime 的管道在 Leopard 中得到了重大升级。在处理 H.264 编码方面有了显着的增强。此外，基于 H.264 的 QuickTime 电影现在支持透明 alpha 层（H.264 规范的可选部分）。最后，QuickTime 支持 64 位。
The only thing I have found related to this marketing quote, however, is this documentshowing how to change the overall opacity of a video layer in QuickTime Pro.
然而，我发现与此营销报价相关的唯一一件事是该文档显示了如何在 QuickTime Pro 中更改视频层的整体不透明度。
回答by RandallB
WebM does support transparency now, and Chrome 29+ can play it back without a flag.
WebM 现在确实支持透明度，Chrome 29+ 可以在没有标志的情况下播放。
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
But it does not work on Chrome for Android.
但它不适用于 Android 版 Chrome。
