13

私はこのデモに興味を持っていました: http://jakearchibald.com/scratch/alphavid/

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

HTML5 ビデオ タグを使用して背景を透明にしたビデオを作成できますか?

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

4

2 に答える 2

28

QuickTime を使用してデモからこのビデオを開くと、別々の RGB 領域と A 領域を持つビデオが表示されます。
RGB およびアルファ領域を含むビデオ

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

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

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

于 2011-02-20T14:35:01.017 に答える
11

WebM は現在透過性をサポートしており、Chrome 29 以降ではフラグなしで再生できます。

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

ただし、Chrome for Android では機能しません。

于 2013-10-12T13:56:45.553 に答える