YouTube 영상 제어 > 자료실

자료실



YouTube 영상 제어

YouTube 영상 제어

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 1,441회 작성일 23-04-08 17:32
작성일 23-04-08 17:32

본문

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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);" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<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
  • 회사 : Cginjs
  • 대표 : Cginjs
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © Cginjs All rights reserved.
notice