OBSのブラウザソースの使い方
配布されている配信素材の多くは、この機能で表示します。覚えるのは一度だけです。
基本の手順
- OBSの「ソース」で ＋ →「ブラウザ」を選ぶ
- 名前を付けて「OK」
- 「ローカルファイル」にチェックを入れる（ネット上のページを出すときはチェックを外してURLを入れます）
- 「参照」でHTMLファイルを選ぶ
- 幅と高さを入れる（素材の説明書に書いてある数字を入れてください）
背景を透明にしたい
素材側で background: transparent が指定されていれば、OBS側の設定は不要です。黒く出る場合は、素材の作りか、OBSの「カスタムCSS」に余計な指定が残っていないかを確認してください。
直したのに表示が変わらない
ファイルを保存したあと、ブラウザソースを右クリック →「更新」を押してください。OBSはページを読み込んだまま保持するため、自動では反映されません。
よくある不具合
文字が切れる
ブラウザソースの幅・高さが足りていません。大きめの数字にして、画面上で縮小するときれいに出ます。
フォルダを移動したら消えた
ブラウザソースはファイルの場所を覚えています。素材の置き場所は最初に決めて、あとから動かさないでください。
動きがカクつく
ブラウザソースを何個も重ねると重くなります。使っていないものは「目のマーク」を消すか、削除してください。
この方式で動く素材を配布しています
時計・待機画面・スケジュール表・作業タイマーなど、ファイル1つで動くものを作っています（自作）。まずは無料の時計で試せます。
ショップの一覧を見る
ほかの記事