如何使用HTML5画布创建一个带Alpha通道的h264视频?

前端之家收集整理的这篇文章主要介绍了如何使用HTML5画布创建一个带Alpha通道的h264视频?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直对这个演示感兴趣: http://jakearchibald.com/scratch/alphavid/

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

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

但我似乎无法弄清楚:您如何使用Alpha通道创建h264,ogg和webm视频文件

解决方法

如果您从 your demo开始使用QuickTime,您将看到一个带有独立RGB和A区域的视频:

如果然后查看演示的代码,您将看到它正在使用一个非屏幕HTML5画布来绘制每个视频帧,从该画布的下半部分读取Alpha像素,以在然后使用putImageData将结果推送到实际显示视频的另一个HTML5 Canvas.

function processFrame() {
  buffer.drawImage(video,0);

  var image = buffer.getImageData(0,width,height),imageData = image.data,alphaData = buffer.getImageData(0,height,height).data;

  for (var i=3,len=imageData.length; i<len; i += 4){
    imageData[i] = alphaData[i-1];
  }

  output.putImageData(image,height);
}

加上整个网络的各种声明,H.264不支持alpha,我几乎确信H.264不能有alpha.我说这个是因为我发现多次引用这个2006年苹果计算机引用的更新的QuickTime在他们的“豹”版本的OS X:

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中视频图层的整体不透明度.

原文链接:https://www.f2er.com/html5/168628.html

猜你在找的HTML5相关文章