特におすすめな記事

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

プログレスバーの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は上記のサイトで生成したものを貼り付けます。?以降のパラメーターに再生時間、線の高さ、再生終了後の挙動、色の情報が含まれています。
上記サイトの設定画面で

②幅と高さの設定

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

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

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