YouTube 영상 제어
페이지 정보
본문
<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>
추천
0
비추천
0
- 이전글 YouTube 영상 제어2 23.04.09
- 다음글 PHP 시간표시를 SNS형식으로 출력하기 23.03.31