グリーン スクリーンでスポークスパーソンを撮影し、複数の形式のビデオ ファイルを用意しました。
Flash では wmode transparent を param タグとembed タグ内で使用できますが、HTML5 の video タグと source タグでこれに似たものはありますか? .m4v または .ogv ビデオを適切に保存して、ブラウザーでこれらのファイルを透明な背景で再生できるようにすることはできますか?
ありがとう
グリーン スクリーンでスポークスパーソンを撮影し、複数の形式のビデオ ファイルを用意しました。
Flash では wmode transparent を param タグとembed タグ内で使用できますが、HTML5 の video タグと source タグでこれに似たものはありますか? .m4v または .ogv ビデオを適切に保存して、ブラウザーでこれらのファイルを透明な背景で再生できるようにすることはできますか?
ありがとう
はい、この種のことは Flash なしで可能です。
ただし、HTML5 ビデオをサポートするのは最新のブラウザーのみです。これは、HTML 5 で展開するときに考慮する必要があり、フォールバックを提供する必要があります (おそらく Flash または透過性を省略します)。
Chrome 30> では、ビデオのアルファ透明度がサポートされています。
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
更新: Chrome と Firefox で、アルファ チャネルを備えた Webm がサポートされるようになりました。
他のブラウザーの場合は回避策がありますが、Canvas を使用してビデオを再レンダリングする必要があり、一種のハックです。seeThruはその一例です。HTML5 デスクトップ ブラウザー (IE9 でさえも) ではかなりうまく動作しますが、モバイルではうまく動作しないようです。Chrome for Android ではまったく動作しませんでした。Android 版 Firefox でも動作しましたが、フレームレートがかなり低かったです。私が間違っていることを証明したいのですが、あなたはモバイルには不向きかもしれません。
現時点で、アルファ チャネルを真にサポートする唯一のビデオ コーデックは、Flash が使用する VP8 です。ビデオがイメージ シーケンスとしてエクスポートされた場合、MP4 はおそらくそれをサポートしますが、Ogg ビデオ ファイルはアルファ チャネルをまったくサポートしていないことは確かです。これは、Flash に固執する方が役立つというまれな例の 1 つかもしれません。
これはビデオ自体では不可能ですが、キャンバスを使用して、色の範囲内のピクセルなどを除いてビデオのフレームを描画できます。もちろん、JavaScriptなどが必要です。Video Puzzle (現時点では壊れているようです)、Exploding Video、およびRealtime Video -> ASCIIを参照してください。
webm 形式は Chrome > 29 の最適なソリューションですが、Firefox IE および Safari ではサポートされていません。最適なソリューションは Flash (wmode="transparent") を使用することです。ただし、「ios」を忘れる必要があります。