先日とある案件で初めてYoutubeのIFrame Player APIを触ったのですが、
割と理解に時間がかかりましたので、備忘録的にまとめようと思います。
※IFrame Player APIはhtmlにyoutubeの動画を埋め込む為のApiです。
htmlへyoutube動画埋めこむ際、一番簡単な方法は、「静的にiframeタグを設置する」というものですが、
このやり方だと「ただ埋め込む」だけでして、
例えば再生ボタンでない任意のボタンから動画再生したり、ある程度ページの内容を読み進めた後で動画を自動再生したりといった小回りの効いた操作は出来ません。
→普通の再生ボタンじゃダサいから、独自の再生ボタンで再生できるようにしたいよ！とかニーズありそうですよね。
で、このApiを用いると、それが出来るということなんですね。
具体的には上記では静的にhtml上に設置していたiframeタグをjavascriptで動的に設置します。
この動的に生成したiframeタグはjavascript上では1つのオブジェクト扱いになっています。
そして「IFrame Player APIで定義されたメソッド」はjavascript上で当該オブジェクトに対し、例えば「再生してくれ」とクエリを送る事が出来まして、それによって「再生」を制御する事が出来ます。
つまりこのApiを用いると、javascriptで再生や停止、自動再生等の操作が制御出来るようになります。
※補足事項：静的に設置した後にjavascriptで操作すればいいのでは？と思ったらそれはノンノ
クロスオリジン制限というブラウザのルールが邪魔して操作できません。
という事でもの凄く詰まったこちらのApiの解説が以下
[YouTubeIFrame Player API公式リファレンス]
(https://developers.google.com/youtube/iframe_api_reference?hl=ja)
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<!-- 以下のようにhtml上に設置したdivタグが、ページ読み込みの際、動的に生成されたiframeタグと入れ替わります。-->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
//以下ではscriptタグを生成・Youtube用のscriptファイルを読み込める様に編集、html上に設置ということをしています。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
//これは②で作ったscriptタグの読み込みが終わったら自動で動くコードで、埋め込み用の動画を生成してくれます。
//この時、どの動画をどんな画質で〜、、、という設定を書きます。そしてこの設定の通り後ほど埋め込み動画が生成されます。
//で、これよく見ると新しく作ったオブジェクトが「player」という変数に入ってます。
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
//これは動画プレイヤーが再生可能状態になったら、それがトリガーになって動くというfunctionです。
//この中に書いてある「event.target.playVideo()」に注目
//これを上で定義した「player」に対して、player.playVideo()という使い方をすると、playerで示された動画オブジェクトに対して再生や停止の命令を出す事が出来ます。
//つまり、当初言っていたような事がしたい場合は独自の条件トリガーを作り、その中で「再生用メソッド等」を展開すればいいだけなのです。
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
</body>
</html>
ちなみにyoutube動画の再生ボタンダサいな、自分風にアレンジしたいなって時は
html上で動画の再生ボタン上にimgを重ねてください（z-index的な意味です）、
そして、あなたの作った再生ボタン（img）を押すと再生のクエリが飛ぶ様にjavascriptを書くのです。
Excellent!