サイト制作に関するメモ書き

HOME > JavaScript > YouTubeの再生画質を変更する

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);

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

player.getPlaybackQuality() 現在の動画の再生画質を返す。
player.getAvailableQualityLevels() 現在の動画の設定可能な画質を配列で返す。
player.setPlaybackQuality(suggestedQuality) 現在の動画を指定した画質に変更する。
suggestedQualityにはsmall,medium,large,hd720,hd1080,highres,defaultが指定できるが、動画によっては設定できないものもある。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP