How to create an h264 video with an alpha channel for use with HTML5 Canvas?

Question

I've been interested in this demo: 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?

Answer 1

If you open this video from your demo with QuickTime you will see a video with separate RGB and A regions:

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 putImageData to shove the result to another HTML5 Canvas which is actually displaying the video.

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 almost feel 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:

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.

The only thing I have found related to this marketing quote, however, is this document showing how to change the overall opacity of a video layer in QuickTime Pro.