[ブラウザ拡張機能] チューブで踊るお🐟リスト

👇マウスとかタップで触ると。。

「踊ってみた」ライブ配信などでユーチューブのビデオクリップ動画を流しながら踊るのに便利かもしれないブラウザ拡張機能

『チューブで踊るお🐟リスト 』

を作ってみました。

主な機能としては事前に登録しておいたYouTubeの動画をリストから選択して、ブラウザ上で順番に再生していく事が出来ます。

動画の再生前に秒単位でインターバル (待ち時間) を設定出来るので、リモコンが無い環境でも、再生ボタンを押してインターバル中に踊る位置に移動という使い方も出来ると思います (当方では実戦テストはしていません。。)。

[目次]

• インストール
• 主な機能
• メイン操作画面
• (1) ビデオプレーヤー
• (2) メディア再生コントロール
• ビデオプレーヤー操作ボタン
• 再生モード選択用スライドスイッチ
• (3) 再生リスト
• 再生リストの選択と編集
• 再生リスト編集用のツールバー
• カウントダウンと曲間時間
• (4) リスト編集用ボタン
• (5) マイリスト
• JSONフォーマットのテキストを追加
• YouTubeの動画を追加
• 確認されている問題/事例
• 更新履歴

インストール

Chrome拡張機能

Menifest v2版のChrome拡張機能をv0.1.xとしてchrome ウェブストアで公開になっています。

📦チューブで踊るお🐟リスト v0.1.3
(26/Apr/2021 公開)

新規でインストールした場合、「再生リスト」と「マイリスト」に、既にいくつかのビデオクリップ動画が登録されていますが、例として登録してあるだけなので、(4)の「リスト編集用ボタン」を使って削除するなりと編集した後、「全て保存」ボタンをクリックすると今後のブラウザー起動時に反映される様になります。 (因みに、登録されている曲は、実際に踊ってみた配信をしている「お🐟さん」の選曲を一部参考にしています。)

Manifest v3版の拡張機能（v0.2.x）を公開予定ですが、Manifest v3の仕様上、メイン操作画面のビデオプレーヤーが使えなくなっています。

v0.2.0では、動画は別のタブで再生される仕様になっていますが、今後、フレーム組み込みプレーヤーAPIが使える様に仕様が更新された場合はプレーヤーを有効にしたいと思っています。

Firefox アドイン

Firefoxブラウザは、標準設定だと新しいタブで読み込んだ動画の自動再生を無効にする仕様になっているので、標準設定になっていると拡張機能を使ってもフレーム組み込みプレーヤーAPIに非対応の動画を自動再生する事が出来ません。

設定を変更すると自動再生の有効化も可能 (📃mozillaサポート) みたいですが、特定のサイト限定ではなく、全サイトに対して有効になるみたいなのと、Firefoxで使いたいという要望も少ないと予想するでの、現時点ではFirefoxアドインとしてのリリースは見合わせています。

主な機能

• YouTubeの動画の再生
• 再生前の秒単位のカウントダウン (インターバル)
• 拡張機能内でのプレイリストの管理
• プレイリストに動画URLと情報の追加/削除
• 動画のURLからクリップの情報を取得
• プレイリストの曲順の変更
• プレイリストの保存と読み込み

メイン操作画面

拡張機能をブラウザに追加後、ブラウザーのツールバーに表示される拡張機能のアイコン をクリックすると下の様なメイン操作画面が開きます。

(1) ビデオプレーヤー

ここに再生中のYouTube動画が表示されますが、再生中、プレーヤ内の右下に表示されるYouTubeの ボタンをクリックすると全画面表示に切り替える事も可能です。

動画の表示にはYouTubeのIFrame player APIを使っていますが、一部の動画はこのAPIでの再生に対応していない様なので、(同じブラウザ上の) 別のタブで開くYouTubeのページで再生する仕様になっています。

v0.2.xではChrome拡張機能の使用の変更により、このビデオプレーヤーが無効になっています。

※ 初回リリースバージョンのv0.1では別のタブで再生される動画の自動再生には対応していないので、ビデオプレーヤー内に「 動画を再生できません」という警告が表示された場合は、その下の「YouTubeで見る」をクリックして、指定した動画を別のタブで開いて再生する必要があります。

今後のバージョンでそういった動画の自動再生にも対応する予定です。 バージョン0.1.1以降からIFrama player APIに対応していない動画も別のタブで開く事によって自動再生に対応しています。

[追記]
別のタブで開く場合は、動画の再生の前後に広告が再生される場合もありますが、「広告をスキップ」のボタンが表示された時点で残りの広告をスキップする仕様になっています。

でも、場合によっては上手くスキップされない場合もあるので、今後共、スキップ機能の改善に努めて行きたいと思っています (広告を全てスキップという仕様ではありません、念の為)。

(2) メディア再生コントロール

         

ビデオプレーヤー操作ボタン

(1)の「ビデオプレーヤー」で再生中の動画の操作が出来ます。

	リピートボタン: 再生中の動画を始めから再生します。
	停止ボタン: 再生中の動画の停止。
	再生ボタン: 動画を再生。 カウントダウン中にクリックするとカウントダウンがスキップされます。
	ポーズボタン: 再生中の動画の一時停止と再開。
	次ボタン: 次の動画を再生。

再生モード選択用スライドスイッチ

クリックでビデオプレーヤの二つの再生モード、「リスト再生モード」か、「シングル再生モード」を切り替える事が出来ます。

リスト再生モード

このモードが選択されている状態で、 ボタンをクリックすると(3)の「再生リスト」に表示されている動画が順番に再生されます。

又、(3)の「再生リスト」内の動画の行をダブルクリックした場合は、再生モードがリスト再生モードに切り替わって、ダブルクリックした行から順番に再生されます。

再生中の動画の行の背景は水色のハイライト表示されます。

[注] (5)の「マイリスト」内の動画はこのモードに対応していないので(4)のリスト編集用ボタンを操作して「再生リスト」にコピーする必要があります。

シングル再生モード

このモードが選択されている状態では、一曲だけの再生になります。 既にビデオプレーヤーに動画が読み込まれている場合は、 をクリックするとその動画が1回だけ再生されます。

又、(3)の「再生リスト」か、(5)の「マイリスト」に表示されている動画を再生したい場合は、右端に表示されるマークをクリックすると、その動画の再生が、可能であれば、(1)のビデオプレーヤーで再生されます。

因みに、左横のマークをクリックすると、ビデオクリックが拡張機能のページとは違う別のタブでYouTubeのページとして再生されます。

(3) 再生リスト

再生リストの選択と編集

この拡張機能では、複数の再生リストを扱える仕様になっていますが、「再生リスト」のタイトルの右横に表示される、濃い水色の長方形内 ⏷に選択済みの再生リストの名前が表示されます。 この長方形をクリックすると、次の例の様に右方向にツールバーと、下方向に登録されている再生リストの名前が展開します。

下方向に展開するリスト名を選択する事で、選択したリストの内容がタイトルの下の表に表示されます。

再生リスト編集用のツールバー

	名変更ボタン: 再生リストの名前を変更。 クリックすると新しい名前を入力する欄が表示されます。
	削除ボタン: 再生リストを削除。
	新規追加ボタン: 新しい空の再生リストを追加。 クリックすると新しい再生リストの名前を入力する欄が表示されます。
	エクスポートボタン: 再生リストをJSONフォーマットのテキストとしてクリップボードにコピー。

再生リストの名前はツールバーのボタンで編集出来ますが、他のリストと重複する名前の登録はできません。

カウントダウンと曲間時間

再生リストの下部にある「カウントダウン時間」と「曲間時間」ではリスト再生モードで初めの動画が再生される前のインターバル (待ち時間)と、それ以降の各動画間のインターバルが設定出来ます。

(4) リスト編集用ボタン

(3)の再生リストと(5)のマイリストに登録されている動画を、行の左端にあるチェックボックスで選択しでリスト間での移動や、削除、編集が出来ます。

次のボタンで操作が選べますが、チェックボックスで選択した動画の数や、どのリスト(「再生リスト」か「マイリスト」か)の動画を選択するかによって無効化されるボタンもあります。

	下のリストで選択した動画を上のリストにコピー (「マイリスト」のチェックボックスを選択した場合のみ有効、複数選択可)
	上のリストで選択した動画を下のリストに移動 (「再生リスト」のチェックボックス選択した場合のみ有効、複数選択可)
	選択した動画を削除 (複数選択可)
	選択した動画を編集 (「マイリスト」のチェックボックスを一つのみ有効)
	全て保存

左端のチェックボックスは上の見出しにあるボタンでまとめて操作する事も出来ます。

	同じリスト内の動画の選択を解除。
	同じリスト内の動画を全て選択。
	同じリスト内の動画の選択の反転。 (チェックボックスが選択されていない状態では表示されません。)
	選択を元に戻す。 (チェックボックスが選択されていない状態では表示されません。)

※ 各リスト内の行は、行内の文字をハイライトした後に、下の動画の様にドラッグ&ドロップで行の順番を変更出来る様になっています。

(5) マイリスト

「マイリスト」での動画の操作は「再生リスト」とほぼ同じですが、タイトルの左右に、次の二つの操作ボタンが追加されています。

	JSONフォーマットのテキストを新しいマイリストとして追加。
	表示中のマイリストにYouTubeの動画を追加。

JSONフォーマットのテキストを追加

このボタンをクリックすると、(2)の「メディア再生コントロール」より下が「JSONテキストから追加」というタイトルの表示に切り替わります。 タイトルの下にJSONフォーマットのテキストを入力なりペーストした後に「変換」ボタンをクリックすると下のリストに認識されたクリップの情報が表示されます。

再生リスト/マイリスト編集用のツールバーにある「エクスポートボタン」でクリップボードにコピーしたリストをテキストファイルとしてバックアップ保存をしておけば、後日、この方法でリストを読み込み直す事もできます。

JSONフォーマットのテキストの例はこちらを 👉「踊るお🐟リスト用 JSON-リスト (2021年)」

YouTubeの動画を追加

このボタンをクリックすると、(2)の「メディア再生コントロール」より下が「新規登録」というタイトルの表示に切り替わります。

YouTube動画のURLを入力した後に「確認」ボタンを押すとインターネット経由で動画の情報が読み込まれます。

「OK」ボタンをクリックすると新しい動画がマイリストの一番下に追加されます。

確認されている問題/事例

• 「マイリスト」のボタンで、YouTubeの動画を追加する再、YouTubeのIFrame player APIに対応していない動画の場合は「確認」ボタンをクリックしても動画の情報が読み込まれない。
• バージョン0.0.1でマークでYouTubeのIFrame player APIに対応していない動画を別のタブで開いた場合、リスト再生モードになっていると、動画終了後にリスト再生が開始してしまう。
• リスト内の行のドラッグ&ドロップの際、行の一部をハイライトしてハイライト部をドラッグ&ドロップする必要がある。

更新履歴

Chrome 拡張機能	Firefox アドオン	更新内容
v0.2.2 (12/May/ 2024 公開)	n.a.	次の動画が再生されない不都合を一部修正する更新。 動画追加時に動画情報を更新する機能の修正。 メイン操作画面にサポートページリンクを追加。
v0.2.1 (10/May/ 2024 公開)	n.a.	再生スクリプトの更新。
v0.2.0 (09/May/ 2024 公開)	n.a.	Manifest v3版。 ビデオプレーヤーが無効になっているので動画は別のタブで再生されます。
v0.1.2 (26/Apr/ 2021 公開)	n.a.	IFrame組み込みAPIに対応していない動画の再生後の処理を改善。
v0.1.1 (20/Apr/ 2021 公開)	n.a.	リスト再生モードでIFrame組み込みAPIに対応していない動画の再生に対応。
v0.1 (14/Apr/ 2021 公開)	n.a.	初回リリース

• 踊るお🐟リスト用 JSON-リスト (2021年)