IFrame Player APIの関数を利用する（再生ステータス：getVideoLoadedFraction / getPlayerState / getCurrentTime）

その他

IFrame Player APIの関数を利用する（再生ステータス：getVideoLoadedFraction / getPlayerState / getCurrentTime）

CGI'sトップページ > Youtube API メモ > IFrame Player APIの関数を利用する（再生ステータス：getVideoLoadedFraction / getPlayerState / getCurrentTime）

IFrame Player APIの関数を利用する（再生ステータス：getVideoLoadedFraction / getPlayerState / getCurrentTime）

関数名	機能概要/構文/パラメータ
getVideoLoadedFraction getPlayerState getCurrentTime	バッファ済みの動画の割合プレーヤーの状態再生開始からの経過時間
	player.getVideoLoadedFraction():Float player.getPlayerState():Number player.getCurrentTime():Number

以下のサンプルでは状態取得ボタンをクリックした際、getVideoLoadedFraction / getPlayerState / getCurrentTime を使用して各種状態を取得し、それぞれ、loaded , status , time というIDを持つHTML要素に表示しています。

サンプルコード

<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 getPlayStatus() {
        var loaded = player.getVideoLoadedFraction();
        document.getElementById('loaded').innerHTML = (Math.floor(loaded*100)) + '%';
        var status = player.getPlayerState();
        var names = {
            '-1' : '未開始',
            '0' : '終了',
            '1' : '再生中',
            '2' : '停止',
            '3' : 'バッファリング中',
            '5' : '頭出し済み'
        };
        document.getElementById('status').innerHTML = names[status];
        var time = player.getCurrentTime();
        document.getElementById('time').innerHTML = time + '秒';
    }
</script>

サンプル

バッファ済みの動画の割合

※停止中のバッファは反映されない模様

プレーヤーの状態

再生開始からの経過時間

Youtube API メモ Indexへ戻る