YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え

どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え】です。前回から引き続きYouTube Player APIのiframe Embedsの記事です。前回は動画の設置と再生停止に関しての記事でしたが今回は音量の切り替えが対象なります。

実装方法

動画の設置に関しては割愛していますので詳しくは動画の設置と再生停止をご確認ください。

HTML

<div id="player"></div>
<a class="youtube_mute" href="#">MUTE</a>
<a class="youtube_unmute" href="#">UNMUTE</a>

ミュート

$(‘.youtube_mute’).click(function(){
	player.mute();
});

アンミュート

$(‘.youtube_unmute’).click(function(){
	player.unMute();
});

ミュート/アンミュートの切り替え

ミュートとアンミュートの操作をするだけでしたら上記の方法でも問題ありませんが実際には一つのボタンで切り替えを実装したほうが効率的かと思います。ここでは、現在ミュートかどうかを取得するisMutedを使用して分岐しておきます。

HTML

<div id="player"></div>
<a class="youtube_mute" href="#">MUTE</a>

JS

function onPlayerReady(){
	player.playVideo();
	$(‘.youtube_mute’).click(function(){
		if(player.isMuted()){
			player.unMute();
			$(this).text(‘MUTE’);
		}else{
			player.mute();
			$(this).text(‘UNMUTE’);
		}
	});
}

まとめ

<script src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var script = document.createElement( 'script' );
script.src = "//www.youtube.com/iframe_api";
var firstScript = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script , firstScript );
var player;
var vid = 'Sv6dMFF_yts';
function onYouTubeIframeAPIReady(){
	player = new YT.Player( 'player',{
		width: '100%',
		height: '500',
		videoId: vid,
		playerVars: {'showinfo': 0, 'autohide': 1, 'controls': 0, 'rel': 0, 'loop': 1},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}
function onPlayerStateChange(){}
function onPlayerReady(){
	player.playVideo();
	$('.youtube_mute').click(function(){
		if(player.isMuted()){
			player.unMute();
			$(this).text('MUTE');
		}else{
			player.mute();
			$(this).text('UNMUTE');
		}
	});
}
</script>
<div id="player"></div>
<a class="youtube_mute" href="#">MUTE</a>

以上になります。