バックミュージックに最適なサムネイルプレーヤープラグインを作成しました。

# 概要
Webサイトで作業をしているときに、バックでyoutubeの音楽を再生するプラグインです。通常のWebサイトで利用できます。
例えば、yahoo Japanサイトで、ニュースを見ながら、音楽を流し続けることができます。
# 主な特徴
(1) 小さいミニプレーヤーで、Webページの片隅で動作します。
(2) 主に、バックミュージック用として、利用できます。
(3) Webページでの作業に邪魔しないように目立たない様にできます。
(4) リラックス用として利用できます。
(5) 自分好みの動画を登録できます。
(6) 登録は、youtubeページ(検索、再生)で行います。
(7) インストール直後は、デフォルトのサンプル動画が再生します。


# サンプル画面

![サムネイルプレーヤー](https://service-tag.tecoyan.net/images/サムネイルプレーヤー.png "サムネイルプレーヤー")

この画像の左上に、「サムネイルの選択」と「非表示」ボタンがあり、その下にプレーヤーが配置されています。
このプレーヤーがyoutubeのプレーヤーです。ここで、音楽を流しています。この時に、「非表示」ボタンをクリックすると、プレーヤー画面は消えます。ただし、音楽は流し続けます。連続ループ指定していますので、繰り返し再生します。

# プラグインのインストール
プラグインは、Chromeウェブストアから、インストールできます。このプラグインは、無料です。(現在、「公開中」です。)
プラグインの名称は、「サムネイルプレーヤーv4.0」です。

# サムネイルの選択ボタン
バックで流す音楽は、適宜、変更できます。変更するには、「サムネイルの選択」ボタンをクリックします。
ここで、使用する動画は、サーバのデータベースに保存してあります。
「サムネイルの選択」ボタンをクリックすると、保存してある動画のジャンルリストが
先に表示されます。そこで、任意のジャンルボタンをクリックします。
すると、そのジャンルのリスト一覧が表示されます。その中から、お気に入りのリストを選択します。
リストを選択すると、「サムネイル一覧」が表示されますので、いずれかのサムネイルをクリックします。
すると、画面の左上のプレーヤーで、その動画が再生されます。

# ジャンル一覧
![ジャンル一覧](https://service-tag.tecoyan.net/images/ジャンル一覧.png "ジャンル一覧")
この「ジャンル一覧」のいずれかのボタンをクリックすると、以下の「リスト一覧」が表示されます。

# リスト一覧
![リスト一覧](https://service-tag.tecoyan.net/images/リスト一覧.png "リスト一覧")
このリスト一覧の下に、「サムメイルリスト」が表示されますので、この中のサムネイルをクリックして、再生をスタートします。
# 動作条件について
サムネイルプレーヤーは、Webサイトを開くと同時に、表示されます。
ブラウザーを立ち上げ時は、画面中央の右矢印をクリックして再生をスタートさせます。
以後は、タブを開くと自動的に再生が始まります。
ページ内のボタンでクリックするとURLが変わる場合は、プレーヤーは、初期化されます。
# 使用例
使用例をyoutubeへアップしました。「yahoo ジャパン」のページの左上隅に、表示されているのが、サムネイルプレーヤーです。
[サムネイルプレーヤー](https://www.youtube.com/watch?v=TbtfKGFRumM "サムネイルプレーヤー")

# 追加機能(ページ右上の拡張機能ボタン)
## (1)ポップアップ画面から選択して登録
ページ右上の拡張機能ボタンをクリックして、そこで、表示されるポップアップ画面でサムネイルを選択できるようにします。この機能で、選択したサムネイルを保持し、以後、ページを変更してもそのサムネイルを引き継ぐことができます。タブを変更するたびに、同じ選択をしなくてもよいようにします。

## (2)youtube再生(watch?)ページからサムネイルを選択して登録
利用者の方が、自分で検索したサムネイルで登録する方法です。youtube再生(watch?)ページでクェリーを指定して検索します。画面右側でスクロールするとさらに候補が出てきます。そこで、一度、画面上で、clickします。すると、
表示されているサムネイル上で、Ctrl+Clickが有効になり、登録ができます。
この時、サムネイルの上にうす緑色の横バーが表示されます。このバーの下のサムネイルが登録対象です。登録が成功する場合と失敗する場合があります。失敗の原因は、動画の所有者により、youtube以外での再生は禁止されている場合です。このサムネイルプレーヤーは、youtubeAPIを使用したWebサイトで、youtubeサイト以外に該当します。

サムネイル登録ページ
![サムネイル選択](https://service-tag.tecoyan.net/images/選択.png "サムネイル選択")
上のページは、youtube再生(watch?)ページです。登録は、youtubeページで行えます。
# サムネイル一覧
サムネイル一覧は、利用者が登録したサムネイルの一覧です。
この一覧リストから、選択して、サムネイルプレーヤーで再生することができます。
サムネイル一覧を表示するには、ページでCtrl+Lキーを押します。


![サムネイル一覧](https://service-tag.tecoyan.net/images/thumbnail_list.png "サムネイル一覧")

# マニュアル表示
v4.0では、マニュアル表示を追加しました。
ページで、Ctrl+Alt+clickすると、表示されます。
![マニュアル](https://service-tag.tecoyan.net/images/manual.png "マニュアル")

# イメージサンプル
<div id="pp" class="ui-draggable ui-draggable-handle" style="width: 190px; margin-top: 0.5%; margin-left: 0.5%; background-color: lightcoral; border: solid; z-index: 5; position: relative; top: 0px; left: 0px;">
<div id="s_frame" style="border: 'solid';"><button id="select_video" style="font-size: 0.8em; font-weight: bold; color: white; background-color: darkgreen;">サムネイルの選択</button><button id="none_disp" style="font-size: 0.8em; font-weight: bold; color: white; background-color: blue;">非表示</button><br /><iframe id="thumbnail_player" style="display: block;" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" title="" width="150" height="100" src="https://iframe.tecoyan.net/index_thumbnail_player_single.php?direct=direct&amp;title=&amp;vid=Tr8zD5RQKSY#bodybg"></iframe><button id="rireki_video" style="font-size: 0.8em; font-weight: bold; color: white; background-color: darkgreen;">履歴からの選択</button><button id="reserve" style="font-size: 0.8em; font-weight: bold; color: white; background-color: blue;">予備ボタン</button></div>
</div>


# あとがき
この「サムネイルプレーヤープラグインv4.0」は、公開中です。
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/libfohekhabfmpjnboabbhdlepbhkmbh?hl=ja&authuser=0)

## 次期バージョンについてのお知らせ
実は、このプラグインを作成していて、2,3の問題に気づきました。
ひとつは、Chromeブラウザーでタブを開く度に、プレーヤーをスタートさせなければなりません。元々の発想は、一度、再生したら、再生が継続することでした。タブを開いても、ページ遷移しても、一つのプレーヤーで再生が続行していることが条件でした。
もう一つは、プレーヤーがページの左上隅にあることが邪魔でした。
プレーヤー全体を非表示にして置くこともできますが、何か違和感がありました。そこで、次のバージョンでは、拡張機能のボタンを使ってプレーヤーを起動するようにします。これにより、タブのページでは、プレーヤーはなくなります。ここでも問題はあります。それは、ひとつのタブで拡張機能のボタンを開いてプレーヤーを起動しても、クリックやページ遷移するとプレーヤーが消えることです。
これを回避するため、プレーヤー専用にタブのwindowを用意し、ブラウザーで何か作業するときは、別のwindowを開いて、yahooサーチなどのネットサーフィンをします。windowが別であれば、ページ遷移して、クリックしても、プレーヤーには影響しません。ただし、プレーヤーが動作しているwindowは、何もせずにそのままにしておきます。
これにより、プレーヤーの再生は継続して、動作し続けます。