IFrame Player APIの関数を利用する（再生画質：getAvailableQualityLevels / setPlaybackQuality / getPlaybackQuality）

その他

IFrame Player APIの関数を利用する（再生画質：getAvailableQualityLevels / setPlaybackQuality / getPlaybackQuality）

CGI'sトップページ > Youtube API メモ > IFrame Player APIの関数を利用する（再生画質：getAvailableQualityLevels / setPlaybackQuality / getPlaybackQuality）

IFrame Player APIの関数を利用する（再生画質：getAvailableQualityLevels / setPlaybackQuality / getPlaybackQuality）

関数名

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

getAvailableQualityLevels
setPlaybackQuality
getPlaybackQuality

設定可能な再生画質
再生画質を設定
再生画質を取得

※再生画質の変更は HTML5 プレーヤーだと限定される模様
※再生速度が変わった場合、onPlaybackQualityChange イベントが起動する
（参考）YouTube HTML5 動画プレーヤー変更ページ

player.getAvailableQualityLevels():Array
player.setPlaybackQuality(suggestedQuality:String):Void
player.getPlaybackQuality():String

suggestedQuality

再生画質(small , medium , large , hd720 , hd1080 , highres , default 等設定可能)

以下のサンプルでは onStateChangeイベント内で、設定可能な画質、現在の画質を取得し、それぞれ、levelsとcurrentというIDを持つHTML要素に表示しています。
（動画が読み込まれていないと取得できない模様、バッファが0以上で取得としている）

また、変更のラジオボタンをクリックした際、setPlaybackQuality を使用して画質を設定しています。

また、setPlaybackQualityにより実際に画質が変わればonPlaybackQualityChange イベントが起動します。これをもって再生画質変更成功ということでコールバック関数内でその旨をresultというIDを持つHTML要素に表示しています。
（動画読込直後にもonPlaybackQualityChange イベントは起動している様で再生直後にも表示されます）
また、onPlaybackQualityChange イベントではイベントオブジェクトの data プロパティに変更後の再生画質が格納されるので、それをcurrentという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',
          playerVars: {
              playlist: 'bHQqvYy5KYo,M7lc1UVf-VE,ngBy0H_q-GY,7u0cKqRPYhY,qC5xK6H0GlQ'
          },
          events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange,
              'onPlaybackQualityChange': onPlayerPlaybackQualityChange
          }
      });
    }
    
    // onStateChangeのコールバック関数
    function onPlayerStateChange(event) {
        var loaded = player.getVideoLoadedFraction();
        if(loaded > 0) {
            var levels = player.getAvailableQualityLevels();
            document.getElementById('levels').innerHTML = levels.join(' , ');
            var current = player.getPlaybackQuality();
            document.getElementById('current').innerHTML = current;
        }
    }
    // onPlaybackQualityChangeのコールバック関数
    function onPlayerPlaybackQualityChange(event) {
        document.getElementById('result').innerHTML = '再生画質の変更に成功しました（onPlaybackQualityChangeイベントが発生しました）';
        document.getElementById('current').innerHTML = event.data;
    }
    
    function qualityChange(thisObj) {
        var quality = thisObj.value;
        player.setPlaybackQuality(quality);
        document.getElementById('result').innerHTML = '';
        var levels = player.getAvailableQualityLevels();
    }
</script>

サンプル

■現在の画質

■設定可能な画質

※高画質から順にリストされる。

■画質を変更

※Youtube側のドキュメントによると「無効な画質を設定すると有効な画質の中で 2 番目に低い画質が設定される」となっているが必ずしもそうではない模様。

small medium large hd720 hd1080 highres default

■再生速度率の変更について成功したかしないか

※成功した場合のみ成功した旨が表示されます。

Youtube API メモ Indexへ戻る