SCM Music Player가 들어가 있는 블로그를 보면서 특정 영상을 가지고와서 공유하는 장치를 만들면 어떨까? 라는 생각을 하게 되서 한번 테스트해서 만들어 본것이다.
HTML 소스는 다음과 같다.
1 2 3 | <div style="position:fixed; bottom:10px; z-index:10; left:10px;"> <embed height=300 width=400 src="https://www.youtube.com/embed/?list=UUI0Ai1RoRD-b8i-qvRR0Yeg" style="z-index:10;"> </div> | cs |
이걸 HTML/CSS 형태로 다시 맞춘다면,
HTML 소스
1 2 3 | <div class="top"> <embed src="https://www.youtube.com/embed/?list=UUI0Ai1RoRD-b8i-qvRR0Yeg" class="top video"> </div> | cs |
CSS 소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .top { position:fixed; bottom:10px; left:10px; z-index:10; } .top .video { height:300; width:400 } | cs |
이렇게 사용하면, 밑에 동영상이 나오게 된다.
참고로 Youtube에서 공유 형식으로 가지고 올려면, 다음과 같은 경로를 잡아줘야한다.
https://www.youtube.com/embed/재생하고자 하는 영상 ID
list로 전부 다 하고자 한다면, 다음과 같이 한다.
https://www.youtube.com/embed/?list=재생 리스트 ID
이렇게 사용한다면, 재생 리스트로 출력하게 된다.
장점은 IE랑 기타 브라우져에서 전부 다 적용이 가능하다.
하지만, 문제점이 있다.
embed는 변수로 뽑아 낼 수가 없다.(iframe 또한 동일하다.)
쉽게 말해서 저기서 다음과 같은 형태의 변수를 만들어 낸다고 해보자.
1 2 | var embl = document.getElementsByTagName("embed"); | cs |
윗 소스의 결과 embl는 null(존재하지 않음)이라는 형태로 나오게된다.
null(존재 하지 않음)이기 때문에 제대로 작동이 안되고, 결국은 오류가 나게 된다.
다음은 구글링해서 얻은 정보이다.
구글에서 제공하는 JavaScript로 컨트롤 할 수 있는 API가 존재한다.
이걸 이용해서 일부분만 듣게 하고 사용자가 플레이를 틀어서 다시 듣게 만들 수 있다.
쉽게 말해서 플레이어를 컨트롤 할 수 있게 된다는 것이다.
Youtube 개발자 사이트1에서 자세한 설명이 나온다.
자세히 알려면, 다음을 알아야 된다.
https://www.youtube.com/iframe_api
여기서 iframe_api란 무엇인가?
이것은 바로 위에 언습한, https://www.youtube.com/embed/를 iframe으로 처리해주는 장치들이 들어가 있는 주소이다.(들어가보면, javascript들이 나온다.)
Youtube 개발자 사이트에서는 다음과 같은 예제를 제공해준다.
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 | <!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'I1-YOOLU_qY', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. 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 done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html> | cs |
이걸 본다면, 이벤트가 포함이 되어서 6초 후에 멈추는걸 볼 수 있다.
이걸 이용해서 컨트롤을 할 수 있다.
단, 이 경우에는 단일 영상에서만 가능하다.
우리는 리스트를 원한다. 라고한다면, 다음과 같은 형태를 사용하면, 리스트를 부를 수 있게 된다.
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 | <!DOCTYPE html> <html> <body> <div id="player" style="position:fixed; bottom:10px; z-index:10; left:10px;"></div> <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); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '300', width: '300', videoId: 'kjjZtbYEhCQ', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError, } }); } function onPlayerReady(event) { console.log("Test"); player.cuePlaylist({ list:'UUI0Ai1RoRD-b8i-qvRR0Yeg', listType:'playlist', index:'0', suggestedQuality:'default' }); } function onPlayerError(event) { console.log("Error"+event); } var done = false; var play = false; var name = 0; function onPlayerStateChange(event) { console.log("StateChange"+event.data); switch(event.data) { case -1: break; case 0: name++; if(name==2 && play) { play=false; player.removeEventListener('onStateChange',onPlayerStateChange); setTimeout(nextVideo, 1000); } break; case 1: if(!done) { setTimeout(stopVideo, 6000); done=true; } play=true; break; case 5: player.playVideo(); break; } } function nextVideo(){ player.addEventListener('onStateChange',onPlayerStateChange); player.nextVideo(); } function stopVideo() { player.pauseVideo(); } </script> </body> </html> | cs |
이렇게 하면, 제대로 작동이 된다.
여기서, removeEventListener와 addEventListener을 사용하는 이유는 중복을 막기 위해서 사용하였다.
play와 name등으로 딜레이를 사용하셔 중복을 막는 것이다.
블로그에서 youtube에 설정을 할 수 있게 되며,
onStateChange라는 이벤트를 이용해서 사용하는 것이다.
Youtube로 사용한 것은 설레임 에디션을 가지고 사용하였다.
tistory.com 등에 제대로 들어 갈려면 쿠키 작업을 해서 시간+영상 인덱스을 가지는걸로 만들어야 될 것이다.
seek;플레이어 재생시간과 startTime;플레이어 시작시간 설정, index; 플레이 하는 위치 등이 지원되어 있기 때문에 쿠키를 사용하면 간단하게 해결될 것 같다.
영상 리스트를 원하는 사람으로 설정할 수 있다.
동영상 주소는 설레임 에디션 동영상이다.
채널 주소 : https://www.youtube.com/channel/UCI0Ai1RoRD-b8i-qvRR0Yeg
- 검색 시간 : (2016-06-03) [본문으로]
'연습' 카테고리의 다른 글
| VIrtual Box에 CentOS 6.3에서 웹 서버 구축하기. -MariaDB 설치하기 MariaDB-5.5.34- (0) | 2016.06.05 |
|---|---|
| VIrtual Box에 CentOS 6.3에서 웹 서버 구축하기. -Apache 설치하기 httpd-2.4.6- (0) | 2016.06.04 |
| Linux root 비밀 번호 까먹었을 경우. init 설정법 (0) | 2016.06.03 |
| VIrtual Box에 CentOS 6.3에서 웹 서버 구축하기. -GCC 설치하기- (0) | 2016.06.03 |
| Linux 수동으로 네트워크 장치 연결하기. 및 부팅시 자동 연결하기. (0) | 2016.06.03 |
