自作のスライダーに入れ込んだYouTube動画がクリックされたときに自動スライドを止めたい、ということがあったのでメモ。
まあ、最初から仕様が決まっていれば動画対応のスライダーを使うところですが。
がっつりYoutubeプレイヤーを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; } }
として、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