• 목록

<div style="position:relative;">

	<iframe id="gangnamStyleIframe" width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0?rel=0&autoplay=1&enablejsapi=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

</div>

<hr/>

<button type="button" class="btn" onClick="PlayVideo(event);"/>재생</button>

<button type="button" class="btn" onClick="PauseVideo();"/>일시정지</button>

<button type="button" class="btn" onClick="stopVideo();"/>종료</button>

<button type="button" id="volumeMute" class="btn" onClick="volumeMute(this);"/>음소거</button>


볼륨 : <input type="range" value="50" min="0" max="100" onChange="soundControl(this.value);" />

<script>

var tag = document.createElement("script");

tag.src = "https://www.youtube.com/iframe_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


// 영상의 정보를 담을 player 전역 변수 선언

var player = "";


// 영상의 세부정보를 playser 변수에 담는다.

function onYouTubeIframeAPIReady() {

	player = new YT.Player('gangnamStyleIframe', {

		/*  <iframe> 태그 지정시 필요없음

		  height : '450'

		, width : '800'

		, videoId : 'E8AYyhPHRDc'

		, playerVars: {

		'autoplay': 1 // 자동재생

		   , 'cc_load_policy' : 0    // 자막 0 : on, 1 : off

		   , 'controls': 0 // 동영상 플레이어 컨트롤 표기

		   , 'disablekb' : 0  // 키보드 컨트롤 사용 중지


		}, */

		events: {

			'onReady': onPlayerReady,

			'onStateChange': onPlayerStateChange

		}

	});

}


function onPlayerReady(event) {

	event.target.playVideo();

}


// 5. The API calls this function when the player's state changes.

//    The function indicates that when playing a video (state=1),

//    the player should play for six seconds and then stop.

var vew_youtube_done = false;

function onPlayerStateChange(event) {

	if (event.data == YT.PlayerState.PLAYING && !vew_youtube_done) {

		setTimeout(stopVideo, 6000);

		vew_youtube_done = true;

	}

}


// 재생

function PlayVideo(event) {

	player.playVideo();

}


// 일시정지

function PauseVideo() {

	player.pauseVideo();

}


// 종료

function stopVideo() {

	player.stopVideo();

}


// 음소거 On / Off

function volumeMute(sThis) {

	if(player.isMuted() == true) {// 음소거

		player.unMute();

	  	jQuery(sThis).html('음소거');

	} else if(player.isMuted() == false) { // 음소거 해제

		player.mute();

		jQuery(sThis).html('음소거 해제');

  	}

}


// 볼륨 조절

function soundControl(number) {

	player.setVolume(number);

}

</script>