IFrame Player APIのイベントとコールバック関数を利用する（onStateChange）

その他

IFrame Player APIのイベントとコールバック関数を利用する（onStateChange）

CGI'sトップページ > Youtube API メモ > IFrame Player APIのイベントとコールバック関数を利用する（onStateChange）

IFrame Player APIのイベントとコールバック関数を利用する（onStateChange）

イベント名	イベント内容	備考
onStateChange	プレーヤーの状態変更	イベント発生直後のプレーヤー状態を示す整数が dataプロパティにセットされる -1（未開始） 0（終了） 1（再生中） 2（停止） 3（バッファリング中） 5（頭出し済み）

以下のサンプルでは onStateChangeイベントにコールバック関数 onPlayerStateChange を設定。 onPlayerStateChangeでは dataプロパティ（状態）を取得してIDがyt_statusのテキストボックスに表示しています。（再生ボタンや停止ボタンをクリックするごとに状態を表示します）

サンプルコード

<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',
          videoId: 'M7lc1UVf-VE',
          events: {
              'onStateChange': onPlayerStateChange
          }
      });
    }
    
    // onStateChangeのコールバック関数
    function onPlayerStateChange(event) {
        
        var status = event.data;
        
        var names = {
            '-1' : '未開始',
            '0' : '終了',
            '1' : '再生中',
            '2' : '停止',
            '3' : 'バッファリング中',
            '5' : '頭出し済み'
        };
        
        if (document.getElementById('yt_status')) {
            document.getElementById('yt_status').value = names[status];
        }
    }
</script>

サンプル

イベント直後のプレーヤー状態：

Youtube API メモ Indexへ戻る