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
- 이전글 YouTube 영상 제어3 (view 스킨에 적용) 23.04.09
- 다음글 YouTube 영상 제어 23.04.08

