web-dev-qa-db-ja.com

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

緑色の画面で広報担当者を撮影し、ビデオファイルを複数の形式で用意しました。

Flashを使用すると、paramおよびembedタグ内でwmode transparentを使用できますが、HTML5のビデオおよびソースタグでこれに似たものがありますか?ブラウザで透明な背景でこれらのファイルを再生できるように、.m4vまたは.ogvビデオを適切に保存することさえ可能ですか?

ありがとう

40
DavidE

はい、Flashがなくてもこのようなことが可能です。

ただし、HTML5ビデオをサポートしているのはごく最近のブラウザーのみです。HTML5で展開する場合はこれを考慮する必要があり、フォールバックを提供する必要があります(おそらくFlashまたは単に透明度を省略します)。

28
Lie Ryan

Chrome 30>は、ビデオのアルファ透明度をサポートしています。

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

23
Praveen Vijayan

更新:アルファチャネルを備えたWebmは、ChromeおよびFirefoxでサポートされるようになりました。

他のブラウザには回避策がありますが、Canvasを使用してビデオを再レンダリングする必要があり、一種のハックです。 seeThr は一例です。 HTML5デスクトップブラウザー(IE9でさえ)でかなりうまく機能しますが、モバイルではあまりうまく機能しないようです。 AndroidではChromeで動作しません。Androidですが、かなりお粗末なフレームレートで動作します。モバイルでは運が悪いかもしれませんが、間違っていることを証明したいと思います。

17
nullability

現時点では、アルファチャネルを本当にサポートしている唯一のビデオコーデックは、Flashが使用するVP8です。ビデオがイメージシーケンスとしてエクスポートされた場合、MP4はおそらくこれをサポートしますが、Oggビデオファイルはアルファチャネルをまったくサポートしていないと確信しています。これは、Flashに固執する方が役立つまれな例の1つかもしれません。

2
Andrew

これはビデオ自体では不可能ですが、キャンバスを使用してビデオのフレームを描画できますが、色の範囲内のピクセルなどは除きます。もちろん、javascriptなどが必要になります。 ビデオパズル (現時点では明らかに壊れている)、 爆発ビデオ 、および リアルタイムビデオ-> ASCII を参照してください。

2
cthom06

Mp4ファイルは、seeThrou Jsライブラリを使用して透明な背景で再生できます。単一のビデオに実際のビデオとアルファチャネルを結合するために必要なすべて。また、一部の古いiphoneデバイスは2000以上のサイズのビデオを再生できないため、ビデオの高さを1400ピクセル未満に維持してください。これは、現時点でwebmをサポートしていないサファリデスクトップおよびモバイルデバイスで非常に便利です。

詳細については、以下のリンクをご覧ください https://github.com/m90/seeThr

1

webm形式はChrome> 29に最適なソリューションですが、FirefoxではサポートされていませんIEおよびSafari、最適なソリューションはFlash(wmode = "透明」)。ただし、「ios」は忘れてください。

0
prakashapkota

Quicktime movsはアニメーション作品としてエクスポートされますが、サファリのみです。すべての主要なブラウザをカバーする完全なソリューション(またはフォーマット)があればいいのにと思います。

0
user3893535