YouTubeのプログレスバー風のOBS用ブラウザ素材

プログレスバーのOBS素材を作ってみた

ある日ふと思い立って作ってみました。OBSで動画を流す際に、その上に置いておくと、YouTubeのプログレスバーのようになる素材です。
需要があるかどうかわかりませんが、少なくとも自分は使う予定がありません。

動画とブラウザ素材を重ねるポイント

今回のミソは次の2つ。

• 動画とブラウザ素材を同時に再生すること

• 動画とブラウザ素材の長さを一致させること

これによって、YouTubeのプログレスバーのような素材を作ることができます。

設定方法＆HTMLファイルのダウンロード方法

YouTube風のプログレスバーを表示するOBS用ブラウザ素材 – Interalives

このサイトから、速度や色を選んでURLを作成することができます。またソースコードを貼っているのでそのままコピーしてHTMLファイルを作っていただいてもかまいません。HTMLファイル1つだけで動くように、CSSやJavaScriptを埋め込んでいます。

使い方

OBSでブラウザソースとして読み込み、動画と重ねて使います。

ブラウザ素材の設定画面

①URLの設定

URLは上記のサイトで生成したものを貼り付けます。?以降のパラメーターに再生時間、線の高さ、再生終了後の挙動、色の情報が含まれています。
上記サイトの設定画面で

②幅と高さの設定

こちらも動画と同じ幅と高さにします。
動画を頻繁に移動するときは、グループ化しておいてもいいかもしれません。

③再生のタイミングの設定

「シーンがアクティブになったときにブラウザの表示を更新」にチェックをすることで、シーンが切り替わった時にブラウザ素材が再生されるようになります。動画(メディアソース)の方も、下図のように「ソースがアクティブになった時に再生を再開する」にチェックを入れることで、動画の開始のタイミングもシーンが切り替わった時になります。

動画の方の設定画面

まとめ

以上、OBSで使えるYouTubeのプログレスバー風素材でした。
個人的にOBSのブラウザソースは配信の幅を大きく広げるもので、時計やタイマー以外にも色々な使い方ができると思っています。
この素材を使えそうと思っていただければ、スキやコメントしていただけると嬉しいです。