【OBS/ブラウザ】VideoTimer【同時視聴用動画タイマー】

1.VideoTimer概要

　手動で上限タイマーを好きな時間に設定し、設定した時間までカウントアップするタイマーです。

　カウントアップ開始する前に10秒間のカウントダウンを行います。

2.各コンテンツ説明

　各コンテンツ説明.jpg参照

3.OBSでの使用方法

　※HTMLをブラウザで開いてOBSで読み込む方法でもできます。

　OBSを開き、使用したいシーンでソースの「＋」を押下し「ブラウザ」を選択します。

　ローカルファイルチェックボックスにチェックを入れ、

　ローカルファイル入力欄に保存したVideoTimer.htmlのパスを入力します（参照ボタンから入力すると楽です）

　その他の入力欄はデフォルトでOKです。

　OBSでの使用方法1.jpg参照

　読み込まれたVideoTimer.htmlを適当な大きさに拡大します。

　（拡大率100%だとOBS上に開始ボタンやリセットボタンが表示されてしまうため。）

　OBSでの使用方法2.jpg参照

　VideoTimer部分が配置したい場所に来るまで拡大/縮小/移動させます。

　OBS上で操作しても良いですが、細かい調整をしたいのであればVideoTimer.htmlをテキストエディタで開き

　CSSを直接書き換えてもOKです。

　書き換える場所（参考として一部記載）

　　・VideoTimer箇所：8行目～12行目

　　・上限タイマー箇所：20行目～22行目

　　・開始/一時停止ボタン箇所：25行目～30行目

　　・リセットボタン箇所：33行目～38行目

　　・モーダル（カウントダウン）箇所：40行目～140行目

　　　　カウントダウンフォントサイズ：105行目

　　　　モーダル説明文：112行目

　OBS上でタイマーを開始させる

　ソースに追加したブラウザを選択し、画面真ん中あたりにある「対話（操作）」ボタンを押下します。

　OBS上でVideoTimer.htmlを参照できるので上限タイマーを設定します。

　（OBS上では時間設定のプルダウンが出ないので、フォーカス後テンキーで直接時間を入力してください）

　開始/一時停止ボタンを押下するとカウントダウンが始まります。

　OBSでの使用方法3.jpg参照

4.使用にあたって

　CSS以外の箇所の改変、改修は自由です。再配布だけはやめてください。

　使用する際のクレジットの表記は特に必要ありません。

5.不具合について

　現在（2024/04/11）判明している不具合について

　①上限タイマーに設定した時間までタイマーを進める

　②開始/一時停止ボタンを押下

　③上限タイマーを変更

　④開始/一時停止ボタンを押下

　上記手順を行うとおかしな状態となります。

　原因は判明していますが通常行う動作（タイマーとして）からは外れているので修正予定はありません。