YouTubeでミュート状態だと、JavaScriptからボリューム変更ができない

YouTubeでボリュームを変更しようとしてできなかったことがあり、なんでだろうと調べてみると、ユーザーの操作でミュートになっている場合、APIからボリュームの設定ができないようです。

サンプルコード

HTML

<div id="sample"></div>
<button id="vol">ボリュームを50に変更</button>

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

ミュート状態でボリュームを変更するデモページ

ミュート状態でない場合は変更できますが、ミュートにした状態だとボリューム操作ができませんでした。
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930