How to Create an H264 Video with an Alpha Channel for Use with HTML5 Canvas

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

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.

How to encode video with transparent background

You probably can't, at least in H.264. See: How to create an h264 video with an alpha channel for use with HTML5 Canvas?

I guess the transparency can be used in mixing and effects processes before encoding to H.264 but not in the final output.

One workarounds may be setting the transparent areas to a pure green value and using that colour as a matte in a later video editing process (like when they use a green background for the weather forecast). Obviously that only works if the output is intended for such an editing process rather than as final output.

iPad alpha on video tag

it turned out that the iPad doesn't support the alpha channel (or at least every method and format I tried wouldn't work) and it wouldn't play the video because Apple have disabled the autoplay attribute

But I did make a workaround, there appears to be a buffer at page load in which you can start the play() function on a video and stop it meaning its ready to play. But you can only get one video in...

Bummer..

---

Related Topics