YouTube 영상 제어2 > 자료실

자료실

자료실

YouTube 영상 제어2

페이지 정보

profile_image
작성자 최고관리자
댓글 0 조회 1,126회 작성일 23-04-09 07:30
작성일 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

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice