クロスブラウザーのサポートを包んでいる間、透明性を備えたビデオのオーバーレイ

デザインに関しては、ウェブサイトがますますダイナミックになっているため、複雑でアニメーション化された要素を組み込む必要がある場合があります。 CSSトランジションからキャンバス上の3Dレンダリング、およびアニメーションSVGへの多くの方法があります。しかし、多くの場合、

しかし、そのビデオに透明な背景が必要であり、ページ上の他のコンテンツと対話するように見えるようにした場合はどうでしょうか？それは可能ですが、特にクロスブラウザー、難しい場合があります。それを探りましょう。

これが例です

透明なビデオオーバーレイがどのように機能するかを確認するために、楽しくて親しみやすいと感じることを願っています。アイデアは、ビデオを下にインタラクティブなコンテンツと統合して、スライダーが進むにつれてビデオの背後にあるコンテンツが変わるようにすることです。それはオーバーレイに犬の本当のビデオを備えたスライダー広告のドッグフードであり、私は現実的でかわいい犬が変換率を改善すると確信しています！

この記事に従って、このデモを自分で再作成することができます。このようなビデオを作成するために必要なものの一部は、「画像シーケンス」です（ビデオに一緒にステッチするアルファ透明画像の束）。例に使用した画像を提供しています。

画像をダウンロードします

可能性を探る

この効果を実現するために、ページに透明な背景を持つアニメーションコンテンツを挿入できるNYの種類のソリューションの検索から始めました。

gif

最初に出てきたのはGIFでした。 GIF形式は30年以上前に導入されましたが、それでも広く使用されています。残念ながら、制限があります。シンプルで小さなアニメーション化されたグラフィックに完全に機能しますが、カラフルで長いビデオ映像にはそれほど優れておらず、色のスペースが限られており、複雑なビデオには大きくなります。

apng

私が見た次のオプションはAPNGでした。何らかの理由でGIFほど人気はありませんが、はるかに優れています。 （私はそれが存在することすら知りませんでしたか？）APNGは、24ビットの画像と8ビットの透明度をサポートしながら、アニメーション化されたGIFファイルと同様に機能します。また、通常のPNGとは後方互換性があります。 APNGがサポートされていない場合、最初のフレームが表示されます。人気のあるブラウザによってサポートされていますが、Internet Explorer 11ではサポートはありません（うん、まだそれをサポートする必要があります）。それは一瞬行く方法のように思えましたが、私はそのファイルのサイズとパフォーマンスに満足していませんでした。

おもしろい事実： Appleは、iOS 10 iMessageアプリのアニメーションステッカーの好みの形式としてAPNG形式を採用しました。

PNGをループします

次に、粗野な、しかし機能しているアイデアが思い浮かびました。ビデオを模倣するために、 JavaScriptを使用してPNGSの束を使用してループします。ただし、多くのデータ転送（各ビデオフレームは別の画像になります）とアニメーション化するリソースを使用する必要があります（ユーザーのバッテリーをすばやく排出したり、コンピューターファンを夢中にさせることができます）。

私はすぐにそのアイデアを放棄しましたが、それは後で役に立つことが判明しました。記事の最後に戻ってきます。

アルファ透明性を備えたWebm

のすべての形式がここで失敗したため、ビデオを調べ始めました。 2013年に公開されたChromeビデオのAlpha透明性に関する記事を見つけました。これは、Alphaチャンネルを使用してWebMのGoogle Chromeサポートを発表しています。それは例を示しており、それを使用する方法に関するヒントを共有します。私は記事を調べましたが、すぐに行く方法のように感じました。 GIFが5.8 MBで計量している間、同じフレームレートとフルカラーを使用して透明性のあるWebmである間、GIFが540 kbしかありませんでした。パフォーマンスと品質を向上させながら、10倍以上が小さくなります。素晴らしい！

しかし、喜びは長く続きませんでした。 iOSの電話でウェブサイトを開くとすぐに、ブラウザの互換性をチェックすることから始めるべきだと気づきました。残念ながら、Safari（iOSとMacOS）はWebMの透明性をサポートしていません。私のビデオがChrome、Firefox、Edgeで完全に機能している間、Safariは醜い黒い背景で私を迎えました。

検索は続きます…

良い解決策

ありがたいことに、私はWWDC 2019のビデオを見つけて、iOS 13とMacos CatalinaからSafariのアルファサポートを備えたHEVCビデオを発表しました。 WebMと同じ機能を提供しているように見えましたが、Appleデバイスはサポートされています。そこで、ハイブリッドソリューション：Safari for SafariおよびWebmには、他のブラウザにWebmを使用することにしました。

完璧な解決策のようです。しかし、今では2つのタスクがあります。

1. アルファ透明性を備えたHEVCを作成します
2. Safari（およびバージョン）を検出して、正しい形式を提供する

透明なビデオを作成します

簡単な部分から始めます：WebMファイルの作成。ビデオファイルを作成、変換、または編集したい場合は、FFMPEGが友達です。これは非常に強力なオープンソースマルチメディアフレームワークであり、マルチメディアファイルと何か関係がある場合は、多くのことができるので、そこから始めてください。 FFMPEGは、目に見える画質劣化なしに、ビデオファイルのサイズを10回以上削減するのに役立つと言えます。しかし、透明性に戻りましょう。

私の経験では、アニメーション化された要素をWebサイトレイアウトに含める必要がある場合は、PNGのビデオフレームのセットとして取得します。私の例プロジェクトに取り組んでいる間でさえ、ビデオから背景を削除するツールは、私のために一連の画像を生成しました。したがって、ここでは、画像のセットからビデオを作成していると仮定します（セットをダウンロードできます）が、代わりにビデオファイルを持っていても、プロセスは似ています（ニーズに合わせてFFMPEGオプションを調整します）。

これで、ビデオを作成する準備ができました。コマンドラインを使用して、PNGファイルを含むフォルダーに移動し、次のコマンドを実行します。

 ffmpeg -framerate 25 -i uscreen- =。png-c：v libvpx -vp9 -pix_fmt yuva420p output.webm

あなたはあなたのニーズに合うように議論を調整できます：

• フレームレート：出力ビデオの1Sに使用される画像の量
• -i screen- =。png：入力ファイル名と形式。私のファイルには001から150の番号があるため、名前に3桁のすべてのファイルを選択するためにマスクとして=を使用しました。
• -C：V：使用するコーデックを指定します。ビデオをVP9でエンコードしたいと思います。これは、ほとんどのWebブラウザーでサポートされています。
• -pix_fmt：使用するピクセル形式を指定します。私たちのCASでは、アルファチャネルをサポートする必要があります。 ffmpeg - -pix_fmtsを実行すると、すべてのサポートされている形式が表示されます。
• output.webm：最後の引数として目的の出力ファイル名を提供します

多くのオプションが利用可能ですが、おそらく複数の記事を調べるのに複数の記事が必要なので、詳細に飛び込むことはありません。サンプルコマンドで提供されているものは、私たちのユースケースのために正常に動作します。

プロセスが終了したら、新しいoutput.webmファイルが表示され、サポートされているブラウザで開くとビデオが表示されます。簡単ですよね？

HEVCアルファの作成

WebPファイルが準備が整っているので、使用する2番目の形式に移動する時が来ました： Alpha透明性のHEVC。残念ながら、執筆時点では、FFMPEGはHEVCをサポートしていないため、別のツールを使用する必要があります。私の知る限り、Alphaを使用してHEVCを作成する唯一の方法は、MacでFinderまたはコンプレッサーを使用することです。 PCをお持ちの場合は、Macを持っている人にあなたのためにそれをするように頼む必要があります。コンプレッサーアプリにはFinal Cut Proのみが提供されているため、使用することはありませんが、カスタム設定が必要な場合は検討する価値があります。

Macos Catalina以来、Finderにはビデオを変換するためのエンコードメディアツールが組み込まれています。それはシンプル（そして無料）であるため、私たちのニーズを養います。

Finderはビデオファイルを入力として期待するため、最初に画像シーケンスをProRes 4444に変換する必要があります。これは重要なステップです。エンコードメディアツールはビデオだけを受け入れないからです。入力ファイルの正しいエンコードが見つかるまで、頭痛を1つか2つ与えました。

FFMPEGを使用して入力ビデオを作成できます。 WebMを作成するときに行ったように、適切な引数でFFMPEGを実行する必要があります。

 ffmpeg -framerate 25 -i uscreen- =。png-c：v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile：v 4444 -f Mov -vframes 150 output.mov

この時点から、Macが必要です。しかし、このプロセスはシンプルで、ターミナルで何かを入力することは含まれていないため、Macを持つ非技術的な友人にあなたのためにそれをするように頼んだとしても、私は彼らが管理できると確信しています。

ProRes4444ビデオの準備ができているため、Finderのコンテンディングフォルダーに移動し、右クリックして、コンテキストメニューで選択したビデオファイルをエンコードすることができます。

ウィンドウが表示されます。目的のHEVC品質（2つの選択肢があります）を選択し、透明性を維持するオプションを確認します。次に、[続行]ボタンをクリックします。

しばらくすると、HEVCでAlphaでエンコードされた新しいファイルが表示されます。それは終わった！ Safariでこのファイルを開くと、透明性が機能することが確認されています。

最後になりましたが、ウェブサイトでビデオを使用する時が来ました！

すべてのブラウザ向けに透明なビデオを提供します

世話をするもう1つのことがあります。一部のブラウザは、WebMまたはHEVC自体をサポートしていますが、透明性がありません。これらのブラウザはビデオを再生しますが、アルファチャンネルの代わりに黒い背景があります。たとえば、Safari 12は透明性なしでHEVCをプレイします。それは私たちにとって受け入れられません。

通常、要素を使用して、フォールバックとして複数の形式とともにビデオを提供し、ブラウザがサポートするブラウザを選択します。ただし、特定のSafariバージョンでのみHEVCを表示する必要があるため、JavaScriptを使用してVideo SRC属性を設定する必要があります。

透明性のあるHEVCはiOS 13およびMac Safari 13でサポートされているため、それらを検出することから始めましょう。サポートに基づいてWebサイトの機能を調整する推奨される方法は、ユーザーエージェントを見るのではなくAPIの存在を検出することですが、ブラウザがビデオ形式の透明性をサポートしているかどうかを検出する簡単な方法は見つかりませんでした。代わりに、私は自分の解決策を思いつきました。きれいではありませんが、仕事をします。

関数supportshevcalpha（）{
  const navigator = window.navigator;
  const ua = navigator.useragent.tolowercase（）
  consthasmediacapability = !!（navigator.mediacapability && navigator.mediacapabilities.decodinginfo）
  const issafari =（（ua.indexof（ 'safari'）！= -1）&&（！（ua.indexof（ 'chrome'）！= -1）&&（ua.indexof（ 'version/'）！= -1）））））））
  Issafari && hasmediacapabilityを返します
}

これは、古いバージョンではサポートされていないNavigator.MediacApabilityを見ることにより、Safari 13以上をターゲットにし、ブラウザがSafariであると見ていることを示しています。関数がtrueを返す場合、HEVCアルファを使用するのは良いことです。その他の場合は、WebMビデオをロードします。

これがHTMLでこれがどのように結合されるかの例を示します。

  


const player = document.getElementById（ 'player'）;
player.src = supportshevcalpha（）？ 'output.mov'： 'output.webm';

ビデオ要素に関するループミュートされたオートプレイプレイインインライン引数に興味がある場合、それらはGIFのような体験を複製することです。

• ミュートがなければ、ビデオはユーザーの相互作用なしでは再生されません。
• iOSでのplaysInlineを使用すると、ビデオはフルスクリーンで開く代わりにレイアウト内の場所で再生されます。
• ループを使用すると、ビデオは何度も繰り返されます。
• Autoplayを使用すると、ページの読み込みで自動的にビデオの再生を開始します（Mutedが所定の位置にある限り）。

それでおしまい！透明なビデオ用の軽量、パフォーマンス、高品質のソリューションがあり、ほとんどの最新のブラウザー（少なくとも最近の2つのバージョンのChrome、Firefox、Safari、Edge）で機能します。基本的なHTMLとCSSを追加して、静的コンテンツを統合して、もう少し実生活にするか、デモにあるのと同じアイデアを使用することもできます。それほど悪くはなかったのですか？

ねえ、でもIE 11はどうですか？私の会社全体がそれを使用しています！

一般に、このような機能を最新のブラウザに制限し、IEのビデオを隠すことをお勧めします。ビデオはおそらくウェブサイトの重要な要素ではありません。しかし、私はIE 11のサポートが必須であり、そこに透明なビデオを見せるために何かを理解することを余儀なくされた商業プロジェクトに取り組んでいました。最終的に、私はJavaScriptを使用してPNG画像をサイクリングすることになりました。フレームの量を減らし、タイマーを使用してそれらを切り替えました。確かに、パフォーマンスはひどいものでしたが、うまくいきました。このビデオはデザイン全体にとって非常に重要だったので、IE 11でパフォーマンスを犠牲にして完全な体験を提供することを意図的に決定しました。

まとめ

アルファ透明ビデオのアイデアを研究する時間を節約し、今ではこのようなアニメーション要素をウェブサイトに組み込むことができることを願っています。いつか必要だと思います！

透明なビデオの使用方法について別のアイデアがありますか？それとも、すでにそれに関するいくつかの経験がありますか？コメントで教えてください。

以上がクロスブラウザーのサポートを包んでいる間、透明性を備えたビデオのオーバーレイの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。