はじめに
ブログやyahoo他のwebサイトのページで動作する「サムネイルプレーヤープラグイン」です。
Chromeブラウザーでタブを開くと同時に小さなyoutubeプレーヤーを表示するプラグインです。このプラグインは、普通のwebサイトであれば、サムネイルプレーヤーを表示することができます。
webサイトで作業をしている間、バックミュージックとして流しつづけることができます。
特長
このプラグインは、パソコン作業に特化した、イージーリスニングプレーヤーです。
(1) 新規にタブを開く度に、サムネイルプレーヤーが表示されます。その時、アクティブなタブで再生を継続します。非アクティブなタブのサムネイルプレーヤーは一時停止します。
(2) 再生する動画を選択再生できます。サムネイルの選択ボタンをクリックして、動画を選択します。
(3) 選択して再生した動画は、サーバのDBに保存されますのでつぎのタブを開いたときには、その動画で再生がスタートします。
(4)サムネイルプレーヤーのポップが気になる場合は、「非表示ボタン」でプレーヤーを消すことができます。
(5)「サムネイルの選択」ボタンで、再生する動画を探すことができます。まだ、未整理の状態ですが、極力、いいコンテンツ(バックミュージックとして最適な)を探して、ジャンルの整理をして行きたいと思います。
イラスト
サンプル
以下の画面は「CodePen」を使用しています。
このサンプルは、複数タブでの「サムネイルプレーヤー」の動作に特化した動画です。
カーソルの動きを追って行きますと、タブを開く度に、サムネイルプレーヤーが開き、クリックすると再生がスタートすることがわかります。また、一度再生したタブに復帰後は、再生が継続することもわかります。
アクティブ以外のタブのプレーヤーは停止します。復帰後、再び再生が停止位置から始まります。
See the Pen 複数タブのサムネイルプレーヤー動作について by なつかしの曲ポータル (@okpzwnyh-the-vuer) on CodePen.
このサンプルでは、youtubeの動画を使用させていただいてます。サムネイルプレーヤープラグインの説明のため、利用させていただいています。
Webサイトへのリンク
プラグインバージョン
現在、Chromeウェブストアで公開中のバージョンは、「サムネイルプレーヤープラグインv4.0」ですが、最新版は、「サムネイルプレーヤープラグインX v1.0」です。
サムネイルの登録方法
以下は、「サムネイルプレーヤープラグインv4.0」のyoutube版説明動画です。
登録・再生手順
(1) サムネイルの登録は、「youtube watch?」ページで行います。ページの右側にサムネイルのリストが表示されています。選択対象のサムネイルを表示するため、ページ上で
クリックします。すると選択対象のサムネイルの上に薄緑色の横バーが表示されます。(注 最新の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はメッセージ通信してデータのやり取りをしています。このメカニズムを使って、タブのプレーヤーの音声をオンオフしています。今回の作成上の要は、この点でした。