출처 : http://1004lucifer.blogspot.kr/2015/04/youtube-player-api.html
IFrame API 사용방법
참조: https://developers.google.com/youtube/iframe_api_reference
* 플레이어 매개변수는 아래 URL을 참고하면 된다.
- https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ko
1. <iframe> 태그에 이벤트 연동
- iframe 태그의 src에 enablejsapi 값을 꼭 넣어주어야 한다. (한참 삽질을..;;)
참조: https://developers.google.com/youtube/iframe_api_reference
- https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ko
1. <iframe> 태그에 이벤트 연동
- iframe 태그의 src에 enablejsapi 값을 꼭 넣어주어야 한다. (한참 삽질을..;;)
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
| <!--User: 1004luciferDate: 2015. 4. 14.--><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <!-- 주의: src링크에 enablejsapi=1 을 꼭 넣어주어야 한다. --> <iframe id="gangnamStyleIframe" width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> /** * Youtube API 로드 */ var tag = document.createElement('script'); var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); /** * onYouTubeIframeAPIReady 함수는 필수로 구현해야 한다. * 플레이어 API에 대한 JavaScript 다운로드 완료 시 API가 이 함수 호출한다. * 페이지 로드 시 표시할 플레이어 개체를 만들어야 한다. */ var player; function onYouTubeIframeAPIReady() { player = new YT.Player('gangnamStyleIframe', {// height: '315', // <iframe> 태그 지정시 필요없음// width: '560', // <iframe> 태그 지정시 필요없음// videoId: '9bZkp7q19f0', // <iframe> 태그 지정시 필요없음// playerVars: { // <iframe> 태그 지정시 필요없음// controls: '2'// }, events: { 'onReady': onPlayerReady, // 플레이어 로드가 완료되고 API 호출을 받을 준비가 될 때마다 실행 'onStateChange': onPlayerStateChange // 플레이어의 상태가 변경될 때마다 실행 } }); } function onPlayerReady(event) { console.log('onPlayerReady 실행'); // 플레이어 자동실행 (주의: 모바일에서는 자동실행되지 않음) event.target.playVideo(); } var playerState; function onPlayerStateChange(event) { playerState = event.data == YT.PlayerState.ENDED ? '종료됨' : event.data == YT.PlayerState.PLAYING ? '재생 중' : event.data == YT.PlayerState.PAUSED ? '일시중지 됨' : event.data == YT.PlayerState.BUFFERING ? '버퍼링 중' : event.data == YT.PlayerState.CUED ? '재생준비 완료됨' : event.data == -1 ? '시작되지 않음' : '예외'; console.log('onPlayerStateChange 실행: ' + playerState); } </script></body></html> |
[Youtube] Player API 를 활용한 유튜브 동영상 컨트롤
![[Youtube] Player API 를 활용한 유튜브 동영상 컨트롤]()
Reviewed by 코알라
on
9월 20, 2018
Rating:
댓글 없음: