YouTube 영상 제어2 > 자료실

회원로그인

오늘 본 게시물

오늘 본 페이지

없음

오늘 본 C.m.A Util

없음

자료실

자료실

YouTube 영상 제어2

페이지 정보

본문

<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

  • 회사 : Cginjs
  • 대표 : Cginjs
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © Cginjs All rights reserved.
notice
Warning: Undefined variable $HTTP_ACCEPT_LANGUAGE in /cginjs/www/bbs/visit_insert.inc.php on line 131