【OBS】アニメ画像とWebM動画

2023年12月2日 00:15

OBSで『GIFアニメーション・APNGアニメーション・WebPアニメーション・WebM動画ファイル』を表示するには「どうするのが良い？」への私なりの答え。

注意：
　本記事は、炭酸コーラの主観に基づいて書かれてます。検証もしてませんし精査もしてません。この記事によりトラブルや損害が発生しても炭酸コーラは何ら責任を負うものではありません。自己責任でお願いします＾＾
　なお、この記事を書いてる時のOBS Studioのバージョンは、「win 30.0.0(64bit)」です。

結論！！！

GIFアニメは、「🖼️画像ソース」として表示する。
APNGアニメは、「▶メディアソース」として表示する。
WebPアニメは、「🌐ブラウザソース」として表示する。
WebM動画は、「▶メディアソース」として表示する。

てか使えるの！？動くの？透過は？

　使えますし、動きますし、透過も動作します。OBSで「GIFアニメ・APNGアニメ・WebPアニメ・WebM動画」は表示可能です。

　ただ正直、WebP/WebMはさほど使い勝手は良くないかも知れません。
🔷WebP
　GIFアニメでは満足できない人向け。APNGが使えるならAPNGでOK
🔷WebM
　OBSでの動画再生の負荷を下げたいと言う人向け。

本題：ファイルの追加方法

説明画像を用意してなくてごめんなさい。要点のみ記します。

GIFアニメ

「🖼️画像ソース」として追加しましょう。
※オプションの「表示されていないときに画像を読み込まない」は場合に応じて☑チェックを入れましょう。

APNGアニメ

「▶メディアソース」として追加しましょう。
ファイル選択ダイアログのオプションを「すべてのファイル(*.*)」にするとAPNGファイルが選択可能となります。
※オプションの「非アクティブ時にファイルを閉じる」は場合に応じて☑チェックを入れましょう。
※「ミキサーから非表示」で音声ミキサーに表示されない様にしておきましょう（ソースドックで対象ソースを右クリック→「ミキサーから非表示」）。

WebPアニメ

「🌐ブラウザソース」として追加しましょう。
これには２つの方法があります。
　１．画像ファイルを直接指定する
　２．HTMLファイルを経由する
※オプションの「表示されていないときにソースをシャットダウンする」や「シーンがアクティブになったときにブラウザの表示を更新する」には☑チェックを入れない方が良いです。
🔷 画像ファイルを直接指定する
・「幅」と「高さ」は画像サイズと同じにする
・カスタムCSSで背景色を消す（後述）
🔷 HTMLファイルを経由する
・HTMLファイルを作成し画像ファイルを指定（後述）
※HTMLタグを使用します。Web作成スキルが必要となります。
※若干再生速度が違ったりもしますが気にしないでいきましょう。

WebM動画

　「▶メディアソース」もしくは「🌐ブラウザソース」として追加しましょう。ソースの作成方法は、APNG/WebPとほぼ同じです。「🌐ブラウザソース」として追加する場合はHTMLファイル経由で追加します。

/* カスタムCSS例：*/
/* ブラウザソースでWebPアニメ画像ファイルを直接指定する際に背景色を消すCSS */
* { background: none !important; margin: 0px auto; overflow: hidden; }

HTMLファイル例：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>HTMLファイル例</title>
  </head>
  <body>
    <div class="cont_webp">
      <img
        src="画像ファイル名.webp"
        alt="WebPアニメーション画像"
        width="512"
        height="512"
      />
    </div>
    <div class="cont_webm">
      <video muted playsinline autoplay loop 
        disablepictureinpicture　width="640" height="360">
        <source src="動画ファイル名.webm" type="video/webm" />
      </video>
    </div>
  </body>
</html>

こんな感じです

お読みいただきありがとうございます。
たいだいこんな感じです。
要は「使える」って事でございます。

　OBS内部で稼働している「画像ビュワー・動画プレイヤー・ブラウザ（クロミウム）」がどんな動きをしてるか分からないので、もしかしたら
　「表示されね～ぞ」「俺は全部表示できるぞ」
って事もあるかも知れません。お許しください。

更新履歴

🔹2023年12月6日：全体的に文章を修正。「参考」を追記。「そもそも」の項を「コラム」に変更し記事最下部へ移動。記事タイトル画像に誤りがあったので差し替え。

参考

🔹動画を animation GIF/ animation png(apng) / webpに変換して比較してみたよ（2022年2月28日）
https://note.com/kurokky/n/n49d1eff7bac9
https://bu-kurokky.github.io/presentension/benchmark/img_test.html

🔹GIFアニメからAPNGの時代に！次世代画像形式APNGを使いこなそう（2022年10月6日）
https://ics.media/entry/2441/
https://ics-creative.github.io/221013_movie_with_alpha/

🔹絶対にやっちゃダメだというgif変換方法と、その他の変換方法をやってみた（2022年2月22日）
https://qiita.com/mikecat_mixc/items/6f88814f0b8c65febd4e

🔹【OBS Studio】ブラウザソースについて（2023年11月12日）
https://style1925.hateblo.jp/entry/obs-browser

🔹GIF、WebP、および WebM 形式
https://jp.bandisoft.com/honeycam/help/file_format/

コラム：そもそも（読み飛ばし推奨）

APNG・WebP・WebMって何？

ザックリご説明。
🔷 GIF
　JPEGと同じく歴史ある画像ファイルフォーマット。圧縮されてるのでBMPより読み込みが早い！！透過処理された画像も作成できて、さらにアニメーションにもできちゃう。
🔷 APNG
　PNGの拡張版。GIFと異なりフルカラーでアニメーションできちゃう。
🔷 WebP
　天下のGoogle様が開発したファイルフォーマット。めっちゃ圧縮されるので、めっちゃ軽いらしい。
🔷 WebM
　天下のGoogle様が開発したメディアコンテナ！！つまり動画ファイル規格。軽いらしい。

OBSでの用途

　GIF/APNG/WebPアニメーション画像は飾りとして、WebM動画は背景動画として利用される事が多いです。
🔷 装飾文字の代替として（GIF/APNG/WebP）
　「テキスト (GDI+)ソース」で「流れる文字」とか、「縁取り」や「ドロップシャドウ」で装飾された文字を配置する際、フォント変更やフィルタ設定が面倒なので画像編集に心得がある方はアニメーション画像を作成し挿入なさる事も多いかと思います。GIFと比較するとAPNG/WebPの方が表現力が高く、特に動く文字を挿入する場合は「透過表現可能・軽量」なAPNG/WebPが選ばれる事も多いと考えます。
🔷 配信画面の装飾として（GIF/APNG/WebP）
　アイコンやイラスト・配信テキストチャット装飾・キャラ立ち絵など配信画面の彩りを豊かにし独自色を出すためにアニメーション画像は利用されています。
🔷 背景として（WebM）
　動く配信背景映像・配信スタート映像・BRB映像（離席中再生する動画）などにWebM動画が利用されています。動画の長さ・大きさ・ファイルサイズなどにもよりますが、一般的な動画ファイルフォーマットと比較してOBSへの負荷が少ない事がWebMが選ばれている理由です。
🔷 他：スポットスポンサーの広告（URL指定）
　ブラウザソースでWebファイルのURLを指定。広告提供事業者サイドで広告のコントロールが容易なため。
🔷 他：SVGアニメ
　面白そうですよね。使ってる人っているんでしょうか？

裏で動く者たち

　アニメーション画像やWebM動画を利用する際にご注意いただきたいのが「裏で動く者たち」の存在です。アニメ画像やWebM動画はファイルサイズや内容によってはCPU負荷が大きくなります。仕様かバグか分かりませんがソースを「👁️非表示」にしていてもCPUを使っている事が結構あります。
　「あれ？非表示にしてるのにCPU使い過ぎじゃない？」と感じたら、諸々見直してください。
　覚えがある方もいらっしゃるかも知れませんが、重めのフィルタを適用したソース。フィルタもソースも非表示にしたのに一向にCPU負荷が下がらない。OBSを再起動しても直らない。何故だろう？？ってな現象。
　これに関して私は諦めました。「ソースが破損した」とでも思ってソースを作成し直すのが良いでしょう。場合によっては「シーンコレクション」から作り直しです＾＾