IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

その他

<< CGI'sトップページ

<< WEBシステム開発依頼

IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

CGI'sトップページ > Youtube API メモ > IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

関数名

機能概要/構文/パラメータ

addEventListener
removeEventListener

イベントリスナーの追加
イベントリスナーの削除

player.addEventListener(event:String, listener:String):Void
player.removeEventListener(event:String, listener:String):Void

※removeEventListenerは2014/12/20現在動かない模様。

event	イベント名
listener	リスナー関数

以下のサンプルでは onStateChangeイベントを追加するボタンをクリックしたあと、なにか操作をすると動画の状態をアラートが表示します。

サンプルコード

<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: 'bHQqvYy5KYo'
      });
    }
    
    function addOnStateChange() {
        player.addEventListener('onStateChange', 'onPlayerStateChange');
    }
    function removeOnStateChange() {
        player.removeEventListener('onStateChange', 'onPlayerStateChange');
    }
    // onStateChangeのコールバック関数
    function onPlayerStateChange(event) {
        var names = {
            '-1' : '未開始',
            '0' : '終了',
            '1' : '再生中',
            '2' : '停止',
            '3' : 'バッファリング中',
            '5' : '頭出し済み'
        };
        alert('現在の動画の状態：'+names[event.data]);
    }
</script>

サンプル

イベントを追加してから動画再生や停止を行うと、動画の状態がアラーと表示されます。
その後、イベントを削除すると表示されなくなりますはずなのだが動かない（原因不明）。

onStateChangeイベントを追加する onStateChangeイベントを削除する

Youtube API メモ Indexへ戻る

IFrame Player APIの関数を利用する（イベント リスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベント リスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベント リスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）

IFrame Player APIの関数を利用する（イベントリスナーの追加または削除：addEventListener / removeEventListener）