IFrame Player APIの関数を利用する（DOM ノードへのアクセスと変更：getIframe）

IFrame Player APIの関数を利用する（DOM ノードへのアクセスと変更：getIframe）

以下のサンプルでは onReadyイベントで getIframe を使用し、Iframeの各種情報を取得、info というIDを持つtextareaの値にセットして表示しています。

サンプルコード

<div id="ytplayer"></div> <script> // API読み込み script = document.createElement( 'script' ); script.src = "//www.youtube.com/iframe_api"; firstScript = document.getElementsByTagName( 'script' )[ 0 ]; firstScript.parentNode.insertBefore( script , firstScript ); // 動画呼び出し function onYouTubeIframeAPIReady() { player = new YT.Player('ytplayer', { height: '285', width: '480', playerVars: { playlist: 'bHQqvYy5KYo,M7lc1UVf-VE,ngBy0H_q-GY,7u0cKqRPYhY,qC5xK6H0GlQ' }, events: { 'onReady': onPlayerReady, } }); } // onReadyのコールバック関数 function onPlayerReady(event) { var playlist = player.getPlaylist(); document.getElementById('playlist').innerHTML = playlist.join(' , '); document.getElementById('index').innerHTML = player.getPlaylistIndex(); } </script>

サンプル

---

Youtube API メモ Indexへ戻る