YouTube Player APIを使用したiframe動画の基本vol3 – 音量の設定と操作

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

実装方法

音量の設定と編集にはHTML5のinputtype=”range”を使っています。音量の初期値はgetVolumeで取得することができますので取得することができますのでこの値をrangeのvalueに入れこみます。

HTML

<div id="player"></div>
<input class="youtube_volume" type="range" max="100" min="0" value="">
<input class="output_volume" type="text" size="3" value="">

JS

function onPlayerReady(){
	player.playVideo();
	volume = player.getVolume();
	$(‘.youtube_volume,.output_volume’).val(volume);
	$(‘.youtube_volume’).change(function(){
		volume = $(this).val();
		$(‘.output_volume’).val(volume);
		player.setVolume(volume);
	});
}

まとめ

<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();
	volume = player.getVolume();
	$('.youtube_volume,.output_volume').val(volume);
	$('.youtube_volume').change(function(){
		volume = $(this).val();
		$('.output_volume').val(volume);
		player.setVolume(volume);
	});
}
</script>
<div id="player"></div>
<input class="youtube_volume" type="range" max="100" min="0" value="">
<input class="output_volume" type="text" size="3" value="">

以上になります。