YouTubeをJavaScriptで制御する(iframe 埋め込み式)


自作のスライダーに入れ込んだYouTube動画がクリックされたときに自動スライドを止めたい、ということがあったのでメモ。
まあ、最初から仕様が決まっていれば動画対応のスライダーを使うところですが。

がっつりYoutubeプレイヤーをJavascriptで作りたいんじゃなくて、
ちょっと止めたいだけだったんだけれど、公式読んでもすぐに分からなくて困ったのでメモ。

[javascript]
//youtube player
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: ‘表示したい高さ’,
width: ‘幅’,
videoId: ‘表示したい動画のID’,
playerVars: {
rel: "0"
},
events: {
‘onStateChange’: onPlayerStateChange
}
});
}
var slide_stop = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
slide_stop = true;
}
}
[/javascript]

として、slide_stopをフラグにしてスライダーの動きを制御しました。

参照:
YouTube Player API Reference for iframe Embeds – YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference?hl=ja

Google Japan Developer Relations Blog: iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介
http://googledevjp.blogspot.com/2011/01/iframe-youtube-player-javascript-player.html