はじめに
この埋め込みコードは、Googleブログ用に作成しています。
元々は、プラグインとして開発しました。Chromeウェブストアに、「サムネイルプレーヤープラグインX v2.0」として、公開しています。
そのプラグインを埋め込み型に改良しました。この埋め込みコードで、プラグインをインストールしなくても、プレーヤーを利用することができます。
機能は、ほぼ同じですが、現在は、一部の機能のみです。
埋め込み方法
以下のリンクをクリックすると、埋め込みコードが表示されますので、そのコードをコピーペーストすれば、プレーヤーが動作します。
動作の仕組み
ブログのページに<iframe>要素を挿入しています。そのiframeで、youtube動画を再生する自作のプレーヤーサイトを指定しています。この場合は、https://iframe.tecoyan.net/index_thumbnail_....phpです。このphpファイルの中で
<script type="text/javascript" src="https://iframe.tecoyan.net/js/thumbnail_player_single_embeded_child.js"></script>を呼び出し元へ返しています。このjavascriptファイルでyoutube APIを使用して、プレーヤーを生成しています。
履歴からの選択
履歴で選択した動画の再生方法は、vidをプレーヤーへ渡して、プレーヤーオブジェクトのnplayer.loadVideoById(vid)メソッドで再生します。
この時、親ページから子ページ(iframe側)へvidを渡すため、postMessage()を使用します。
親ページ(ブログ本体ページ)からのメッセージ送信処理
//******************************************************
//ここで、すでに#ppはあるので、iframeのプレーヤー側に
//vidデータを渡し、nplayer.loadVideoById(vid)で、再生
//すればいいはず。postMessage()で、 //
//******************************************************
const iframeElement = document.querySelector("#thumbnail_player");
iframeElement.contentWindow.postMessage({message:"vid",vid:vid,title:title,thumbnail:thumbnail}, "*");
子ページ(iframe側)の受信処理
// 親からメッセージを受信したとき
window.addEventListener('message', function (e) {
//このサブドメイン名でチェックします。(https://embeded-player.blogspot.com)
if (e.origin.indexOf("embeded")===-1 ) //送信元のドメインが明確な場合は、チェックすることが強く推奨されています
return;
//
//メッセージが"vid"であれば、vidデータで再生します。
if(e.data.message==="vid"){
//ここで再生します。
nplayer.loadVideoById(e.data.vid);
nplayer.setVolume(100);
}else{
nplayer.setVolume(0);
}
},false);
この親子間のメッセージ通信で、動画コード(vid)をやりとりします。
履歴からの選択で、いろいろな動画に切り替えることができます。
