logo标签列表

如何创建一个带有alpha通道的h264视频，以便在HTML5画布中使用？

htmlcanvash.264alpha-transparency
13
2个回答
28
如果您使用QuickTime从your demo打开this video，您将看到一个具有单独的RGB和A区域的视频：
Video with RGB and alpha regions

然后，如果您查看演示的代码，您会发现它使用一个离屏的HTML5画布来绘制每个视频帧，并从该画布的第二半部分读取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通道。我这样说是因为我在苹果电脑的"Leopard" OS X版本的QuickTime更新中找到了对2006年引用的多个参考文献：
"QuickTime在Leopard中的架构正在接受显着的升级。在处理H.264编码方面进行了重大改进。此外，透明的alpha层（H.264规范的可选部分）现在支持基于H.264的QuickTime电影。最后，QuickTime支持64位。"
然而，与此营销语相相关的唯一发现是此文档，它展示了如何更改QuickTime Pro中视频层的总体不透明度。
嗨@Phrogz，谢谢，我开始理解了。但是这里有另一个问题。我绝不是JavaScript专家，所以如果这很明显，我很抱歉，但这就是我认为正在发生的事情：for循环遍历图像数据数组的每个第四个元素，显然代表alpha通道，前三个分别是R、G和B。但是您说这个演示创建了没有实际alpha通道的alpha数据，是吗？ - chuls
1
@chuls 正确：ImageData对象的data属性是一个名为CanvasPixelArray的扁平数组结构，其中包含所有RGBA值。上面的脚本从图像的下半部分中获取蓝色通道的值，并将它们用作上半部分的alpha值。然后，它将每帧创建的具有新alpha的图像复制到输出中。 - Phrogz
非常感谢您的帮助，我终于明白这里发生了什么。 - chuls
11
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接