YouTubeの再生画質を変更する

YouTubeを埋め込む際、プレーヤーのサイズに応じて再生画質が自動で設定されますが、再生画質を変更したいということがたまにあるので、設定の変更方法をメモしておきます。

サンプルコード

設定の変更に合わせて、現在の設定値と設定可能な範囲も取得してみます。
動画によって設定可能な範囲が異なるので注意してください。

HTML

<div id="sample"></div>
<div class="buttonarea">
	<button id="getLevels">設定可能な値</button>
	<button id="getLevel">現在の値</button>
	<button id="small">small</button>
	<button id="medium">medium</button>
	<button id="large">large</button>
	<button id="hd720">hd720</button>
	<button id="hd1080">hd1080</button>
	<button id="highres">highres</button>
	<button id="default">default</button>
</div>

JavaScript

// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytPlayer;
var ytArea = 'sample';
var ytID = '8QjqkATvH9M';

// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		width: 640,
		height: 390,
		videoId: ytID,
		events: {
			'onReady': onPlayerReady
		}
	});
}
function onPlayerReady() {
    ytPlayer.playVideo();
}

// 設定可能な値を取得
document.getElementById('getLevels').addEventListener('click', function() {
	var levels = ytPlayer.getAvailableQualityLevels();
	console.log(levels);
}, false);

// 現在設定されている値を取得
document.getElementById('getLevel').addEventListener('click', function() {
	var level = ytPlayer.getPlaybackQuality();
	console.log(level);
}, false);

// 設定値の変更
document.getElementById('small').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('small');
}, false);
document.getElementById('medium').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('medium');
}, false);
document.getElementById('large').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('large');
}, false);
document.getElementById('hd720').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('hd720');
}, false);
document.getElementById('hd1080').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('hd1080');
}, false);
document.getElementById('highres').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('highres');
}, false);
document.getElementById('default').addEventListener('click', function() {
	ytPlayer.setPlaybackQuality('default');
}, false);

再生画質を変更するデモページ

【参考サイト】

• iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google Developers