YouTubeのボリュームについて調べてみる

YouTube再生中にボリュームを変更して、別ページに遷移して別のYouTubeを再生すると、変更したボリュームの値が引き継がれているかと思います。
APIからボリュームを変更した場合も同様に引き継がれると思っていたのですが、違うようだったので実験してみました。

サンプルコード

以下の流れで実験を行ってみます。

1. YouTubeを再生して、ボリュームを適当に変更してから次のページへ
2. YouTubeを再生すると、JavaScriptで自動でミュートにされるので、そのまま次のページへ
3. YouTubeを再生したときに、1で設定したボリュームになるのか、2で設定したミュートになるのか確認

HTML

<div id="sample"></div>

JavaScript(1ページ目)

// 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 ytArea = 'sample';
 
// 埋め込むYouTube ID
var ytID = 'UB3WKlkIqYo';
 
// プレーヤーのサイズを指定
var ytWidth = 640;
var ytHeight = 390;
 
// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ1

JavaScript(2ページ目)

// 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 ytArea = 'sample';
 
// 埋め込むYouTube ID
var ytID = 'WTneeCE4Dcg';
 
// プレーヤーのサイズを指定
var ytWidth = 640;
var ytHeight = 390;
 
// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID,
		events: {
			'onStateChange': onPlayerStateChange
		}
	});
}
function onPlayerStateChange(e) {
	var ytStatus = e.target.getPlayerState();
	if(ytStatus == 1) {
		ytPlayer.setVolume(0);
	}
}

JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ2

JavaScript(3ページ目)

// 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 ytArea = 'sample';
 
// 埋め込むYouTube ID
var ytID = 'STg4Ya8bEFo';
 
// プレーヤーのサイズを指定
var ytWidth = 640;
var ytHeight = 390;
 
// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ3
結果は最初に設定した値になっていたので、JavaScriptから変更したボリュームは引き継がれていないようでした。
　

2ページ目でJavaScriptでミュートにした部分を80に変更する形でも試してみます。
JavaScriptの31行目にあるsetVolumeの値を変更しただけなので、コードは割愛します。

JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ2-1
JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ2-2
JavaScriptからボリュームを変更した場合に引き継がれるかのデモページ2-3
結果は同じく、JavaScriptから変更したボリュームは引き継がれませんでした。

ミュートにした状態で自動再生させる場合、サイト内にある別ページのYouTubeにも対応がいるのかなと思っていたのですが、JavaScriptから変更したボリュームは引き継がれないようなので特に対応はいらなそうです。