web-dev-qa-db-ja.com

HTML5 Canvasで使用するアルファチャネルを使用してh264ビデオを作成するにはどうすればよいですか？

私はこのデモに興味がありました： http://jakearchibald.com/scratch/alphavid/

私もここでこの質問を見ました：

HTML5ビデオタグを使用して背景が透明なビデオを作成できますか？

しかし、私には理解できないようです。アルファチャネルを使用してh264、ogg、およびwebmビデオファイルをどのように作成しますか？

htmlcanvash.264alpha-transparency
13
chuls

QuickTimeで このビデオ from デモ を開くと、RGB領域とA領域が別々になっているビデオが表示されます。
Video with RGB and alpha regions

次にデモのコードを見ると、1つのオフスクリーンHTML5キャンバスを使用して各ビデオフレームを描画し、そのキャンバスの後半からアルファピクセルを読み取って、ピクセルごとの明示的なアルファ値を設定していることがわかります。前半、次にputImageDataを使用して、実際にビデオを表示している別のHTML5キャンバスに結果を表示します。

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はアルファをサポートしておらず、私ほとんどは、H.264がアルファを持つことができないと確信しているというWeb全体のさまざまなステートメントと相まって。これは、OSXの「Leopard」リリースで更新されたQuickTimeに関するAppleコンピュータからの2006年の引用への複数の参照を見つけたためです。

QuickTimeの配管は、Leopardで大幅なアップグレードを受けています。 H.264エンコーディングの処理が大幅に強化されました。また、H.264仕様のオプション部分である透明アルファレイヤーが、H.264ベースのQuickTimeムービーでサポートされるようになりました。そして最後に、QuickTimeは64ビットをサポートします。

ただし、このマーケティング見積もりに関連して私が見つけた唯一のことは、 このドキュメント QuickTimeProでビデオレイヤーの全体的な不透明度を変更する方法を示していることです。

26
Phrogz