プログレスバーのOBS素材を作ってみた
ある日ふと思い立って作ってみました。OBSで動画を流す際に、その上に置いておくと、YouTubeのプログレスバーのようになる素材です。
まず、OBSではブラウザをソースとして読み込むことができます。
その際にサイトの背景を透過して配信画面に置くことができ、時計やタイマーを表示するのに使われています。
今回作ったのは、YouTubeの赤いバーのような素材です。といっても、先頭に●がついてるものでも、経過時間が表示されたりしているものでもなく、シンプルに赤い線が一定の速度で伸びていくというものです。
これを既存の動画の上に配置することで、YouTubeの動画っぽく再生することができます。
需要があるかどうかわかりませんが….
動画とブラウザ素材を重ねるポイント
今回のミソは次の2つ。
動画とブラウザ素材を同時に再生すること
動画とブラウザ素材の長さを一致させること
これによって、YouTubeのプログレスバーのような素材を作ることができます。
設定方法＆HTMLファイルのダウンロード方法
以下のコードを.htmlファイルにしてご使用ください。HTMLファイル1つだけで動くように、CSSやJavaScriptを埋め込んでいます。
パラメーターによって動作をカスタマイズすることができます。
| パラメータ名 | 内容 | 例 | デフォルト値 |
| duration | アニメーションが完了するまでの時間 | 5s, 30s, 1m | 3s |
| height | バーの太さ（高さ） | 5px, 10px | 5px |
| width | バー全体の幅 | 100%, 300px | 100% |
| color | バーの色（CSSカラー形式） | #ff0000, red, rgb(255,0,0) | #f00 |
例えばこのようになります。
file:///path/to/progress_bar.html?duration=60s&height=10px&color=#00ff00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>progress_bar</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bar_animation{
width: 0%; position: absolute;
background-color: red; margin: 0; padding: 0; bottom: 0; animation-name: animation; animation-timing-function : linear;
}
@keyframes animation {
0%{
width: 0;
}
100%{
width: 100%;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div id="bar" style="animation-duration: 50s;"></div>
<script>
duration = "3s"
height = "5px"
width = "100%"
//mode = "none" //none or fowards
color = "#f00"
let url = new URL(window.location.href);
let params = url.searchParams;
_duration = params.get("duration");
_height = params.get("height");
_width = params.get("width");
//_mode = params.get("mode");
_color = params.get("color");
if (_duration != null) {duration = params.get("duration");}
if (_height != null) {height = params.get("height");}
if (_width != null) {width = params.get("width");}
//if (_mode != null) {mode = params.get("mode");}
if (_color != null) {color = params.get("color");}
bar_elament = document.getElementById('bar');
bar_elament.style.animationDuration = duration;
bar_elament.style.height = height;
bar_elament.style.width = width;
bar_elament.style.backgroundColor = color;
//bar_elament.style.animationFillMode = mode;
bar_elament.classList.add("bar_animation");
</script>
</body>
</html>使い方
OBSでブラウザソースとして読み込み、動画と重ねて使います。
①URLの設定
URLは上記のサイトで生成したものを貼り付けます。?以降のパラメーターに再生時間、線の高さ、再生終了後の挙動、色の情報が含まれています。
上記サイトの設定画面で
②幅と高さの設定
こちらも動画と同じ幅と高さにします。
動画を頻繁に移動するときは、グループ化しておいてもいいかもしれません。
③再生のタイミングの設定
「シーンがアクティブになったときにブラウザの表示を更新」にチェックをすることで、シーンが切り替わった時にブラウザ素材が再生されるようになります。動画(メディアソース)の方も、下図のように「ソースがアクティブになった時に再生を再開する」にチェックを入れることで、動画の開始のタイミングもシーンが切り替わった時になります。
まとめ
以上、OBSで使えるYouTubeのプログレスバー風素材でした。
個人的にOBSのブラウザソースは配信の幅を大きく広げるもので、時計やタイマー以外にも色々な使い方ができると思っています。
この素材を使えそうと思っていただければ、スキやコメントしていただけると嬉しいです。
