YouTube 영상 제어2
페이지 정보
작성일 23-04-09 07:30
본문
<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="viewPlayVideo(event);"/>재생</button> <button type="button" class="btn" onClick="viewPauseVideo();"/>일시정지</button> <button type="button" class="btn" onClick="viewStopVideo();"/>종료</button> <button type="button" id="volumeMute" class="btn" onClick="viewVolumeMute(this);"/>음소거</button> 볼륨 : <input type="range" value="50" min="0" max="100" onChange="viewSoundControl(this.value);" />
<script>var view_youtube_player_obj_id = 'gangnamStyleIframe';</script> <script> var vew_youtube_tag = document.createElement("script"); vew_youtube_tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(vew_youtube_tag, firstScriptTag); // 영상의 정보를 담을 view_youtube_player 전역 변수 선언 var view_youtube_player = ""; // 영상의 세부정보를 playser 변수에 담는다. function onYouTubeIframeAPIReady() { view_youtube_player = new YT.Player(view_youtube_player_obj_id, { /* <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(viewStopVideo, 6000); vew_youtube_done = true; } } // 재생 function viewPlayVideo(event) { view_youtube_player.playVideo(); } // 일시정지 function viewPauseVideo() { view_youtube_player.pauseVideo(); } // 종료 function viewStopVideo() { view_youtube_player.stopVideo(); } // 음소거 On / Off function viewVolumeMute(sThis) { if(view_youtube_player.isMuted() == true) {// 음소거 view_youtube_player.unMute(); jQuery(sThis).html('음소거'); } else if(view_youtube_player.isMuted() == false) { // 음소거 해제 view_youtube_player.mute(); jQuery(sThis).html('음소거 해제'); } } // 볼륨 조절 function viewSoundControl(number) { view_youtube_player.setVolume(number); } </script>
추천
0
비추천
0
- 이전글 YouTube 영상 제어3 (view 스킨에 적용) 23.04.09
- 다음글 YouTube 영상 제어 23.04.08