참고① : iframe 삽입에 대한 YouTube Player API 참조 문서
참고② : YouTube 내장 플레이어 및 플레이어 매개변수
■ jQuery를 이용한 유튜브 영상 제어
# 소스 코드
<html>
<head>
<title>:: YouTube 영상 제어 ::</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<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 = "";
// HTML 문서가 모두 준비되면
jQuery(document).ready(function () {
onYouTubeIframeAPIReady();
});
// 영상의 세부정보를 playser 변수에 담는다.
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height : '450'
, width : '800'
, videoId : 'E8AYyhPHRDc'
, playerVars: {
'autoplay': 1 // 자동재생
, 'cc_load_policy' : 0 // 자막 0 : on, 1 : off
, 'controls': 0 // 동영상 플레이어 컨트롤 표기
, 'disablekb' : 0 // 키보드 컨트롤 사용 중지
}
, events: {
'onReady' : playVideo
}
});
}
// 재생
function playVideo() {
player.playVideo();
}
// 일시정지
function pauseVideo() {
player.pauseVideo();
}
// 종료
function stopVideo() {
player.stopVideo();
}
// 음소거 On / Off
function volumeMute() {
// 음소거
if(player.isMuted() == true) {
player.unMute();
jQuery("#volumeMute").val("음소거");
}
// 음소거 해제
else if(player.isMuted() == false) {
player.mute();
jQuery("#volumeMute").val("음소거 해제");
}
}
// 볼륨 조절
function soundControl(number) {
player.setVolume(number);
}
</script>
</head>
<body>
<div style="position:relative;">
<div id="player"></div>
</div>
<hr/>
<input type="button" value="재생" onClick="playVideo();"/>
<input type="button" value="일시정지" onClick="pauseVideo();"/>
<input type="button" value="종료" onClick="stopVideo();"/>
<input type="button" id="volumeMute" value="음소거" onClick="volumeMute();"/>
볼륨 : <input type="range" value="50" min="0" max="100" onChange="soundControl(this.value);"/>
</body>
</html>
|
# 출력 결과
