隠居のパソコン備忘録：Youtubeをページ内で再生させるYouTube Player API を試してみる
9月の終わりにあった和泉の国ジャズストリートで録画した Videoをブログにアップした。その時、ブログのページ内で再生できるようにしたかったが、方法が見つからず、YouTube にリンクするしかなかった。YouTube の画面はかなり noisy である。
最近、ひょんなことで、ブログのページ内で録画を YouTube の機能を使って再生できることが分かった。私的な旅行地図などを作るときに使っている Google Maps API（Application Program Interface) と同じように、Javascript を使う。Codeを自ら作り出す能力はないから、他人様のコードのパクリである。Javascript だから少しぐらいは自分で改訂することが出来る。
今回は、YoheiM.net のYoutubeをサイト内で再生させるYoutube APIの使い方を参考にさせていただいた。
上の YouTube 埋め込みプレーヤは、次のような Javascript コードで実現している。
青太字部分は、YouTube に登録されたファイル名である。
青太字部分は、YouTube に登録されたファイル名である。
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'rL--g6q7zu4',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('finish');
}
}
</script>
追記（2015/10/26)： Youtube の Webページヘ内で再生させるのに、上のコードでは、Internet Explorer では表示されないことが、最近になって分かった。現在では Yutube が iframe を使ったコードを提供しており、更に便利にWebページ内に埋め込むことが可能になっている。方法など詳細については、別に記録したいと思う。
現在は、新しい埋め込みコードで、表示している。