プラグインで動作する複数タブ対応のサムネイルプレーヤーです。

# はじめに
ブログやyahoo他のwebサイトのページで動作する「サムネイルプレーヤープラグイン」です。
Chromeブラウザーでタブを開くと同時に小さなyoutubeプレーヤーを表示するプラグインです。このプラグインは、普通のwebサイトであれば、サムネイルプレーヤーを表示することができます。
webサイトで作業をしている間、バックミュージックとして流しつづけることができます。

# 特長

このプラグインは、パソコン作業に特化した、イージーリスニングプレーヤーです。

(1) 新規にタブを開く度に、サムネイルプレーヤーが表示されます。その時、アクティブなタブで再生を継続します。非アクティブなタブのサムネイルプレーヤーは一時停止します。

(2) 再生する動画を選択再生できます。サムネイルの選択ボタンをクリックして、動画を選択します。

(3) 選択して再生した動画は、サーバのDBに保存されますのでつぎのタブを開いたときには、その動画で再生がスタートします。

(4)サムネイルプレーヤーのポップが気になる場合は、「非表示ボタン」でプレーヤーを消すことができます。

(5)「サムネイルの選択」ボタンで、再生する動画を探すことができます。まだ、未整理の状態ですが、極力、いいコンテンツ(バックミュージックとして最適な)を探して、ジャンルの整理をして行きたいと思います。
# イラスト

![サムネイルぷれーやー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/25e65b91-83e4-fd52-83cc-541fa1539fc0.png)


    
# サンプル
以下の画面は「CodePen」を使用しています。
このサンプルは、複数タブでの「サムネイルプレーヤー」の動作に特化した動画です。

カーソルの動きを追って行きますと、タブを開く度に、サムネイルプレーヤーが開き、クリックすると再生がスタートすることがわかります。また、一度再生したタブに復帰後は、再生が継続することもわかります。
アクティブ以外のタブのプレーヤーは停止します。復帰後、再び再生が停止位置から始まります。

<p class="codepen" data-height="300" data-slug-hash="WNLNKaN" data-editable="true" data-user="okpzwnyh-the-vuer" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okpzwnyh-the-vuer/pen/WNLNKaN">
  複数タブのサムネイルプレーヤー動作について</a> by なつかしの曲ポータル (<a href="https://codepen.io/okpzwnyh-the-vuer">@okpzwnyh-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


このサンプルでは、youtubeの動画を使用させていただいてます。サムネイルプレーヤープラグインの説明のため、利用させていただいています。
[Webサイトへのリンク](https://iframe.tecoyan.net/embed/index_thumbnail_player_v.php)



# プラグインバージョン
現在、Chromeウェブストアで公開中のバージョンは、「サムネイルプレーヤープラグインv4.0」ですが、最新版は、「サムネイルプレーヤープラグインX v1.0」です。

# サムネイルの登録方法

以下は、「サムネイルプレーヤープラグインv4.0」のyoutube版説明動画です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/TbtfKGFRumM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

### 登録・再生手順

(1) サムネイルの登録は、[「youtube watch?」](https://www.youtube.com/watch?v=TbtfKGFRumM)ページで行います。ページの右側にサムネイルのリストが表示されています。選択対象のサムネイルを表示するため、ページ上で
クリックします。すると選択対象のサムネイルの上に薄緑色の横バーが表示されます。(注　最新のxバージョンでは、プレーヤー画面上でクリックします。)
この横バーのあるサムネイルが登録可能なサムネイルになります。
(2) 登録するサムネイルにカーソルを当て、cntl+clickすると「このサムネイルを選択しますか」との案内が表示されますので、OKをクリックすると登録されます。
(3)登録すると同時に、サムネイルプレーヤーで再生がスタートします。

# 動作の特長
このサムネイルプレーヤーは、動作に特徴があります。
(1) 複数タブで、プレーヤーが動作しますが、音声が聞こえるのは、アクティブのタブのみです。その他のタブは音量がゼロにしています。ただし、再生は続行しています。
(2) 再生は、リピートします。
(3)タブを削除しない限り、再生はエンドレスに動作しています。

# あとがき
これまで、プラグインをいくつか作成してきました。主に、youtubeの動画を検索し、再生リストを作るプラグインとか、yahooや、wikiで検索サーチするプラグイン、それと今回のサムネイルプレーヤーなどです。変わり種としては、youtubeの字幕作成支援プラグインもあります。これらのプラグインは、Chrome拡張機能のバージョン3仕様で作成しています。
プラグインのjavascriptは、content.jsとbackground.jsを使用しています。一部のプラグインでは、popup.htmlとpopup.jsを使用しています。今回のサムネイルプレーヤープラグインは、popup.htmlとpopup.jsは使用していません。その代わりに、親ページにiframeを使用し、そこでyoutubeプレーヤーを動作させています。
iframeには別サイトで動作しているyoutubeプレーヤーのhtmlファイルを挿入しています。ここでも、javascriptファイルが動作していますので、このスクリプトとcontent.js、background.jsはメッセージ通信してデータのやり取りをしています。このメカニズムを使って、タブのプレーヤーの音声をオンオフしています。今回の作成上の要は、この点でした。