안녕하세요 처음에는 iframe으로 유투브 동영상을 불러오기만 했었습니다.
유투브에 동영상을 올리면 고유 id를 부여하게 되는데
이런식으로만 작성해줘도 유투브 동영상이 바로 나오게 됩니다.
위 동작을 이용해 DB에 유투브 아이디를 저장후 for문으로 차래대로 뽑아왔습니다
(정확히 말하면 angular의 repeat 입니다)
이런식으로 모두 잘 동작 됬습니다. 여기서 기능 추가로 일시정지 버튼을 누를시 위에 있는 2개의 유투브가
모두 정지되어야 합니다. 이걸 위해 오유에 조언을 듣고 구현을 해보았습니다.
블로그나 유투브 api싸이트에 가보면 다음과 같은 동작 과정을 거치게 됩니다.
기존 방식
- iframe을 써서 바로 유투브를 불러왔다.
유투브 API에 나온 방식
- 1. 우선 iframe을 불러올 영역에 <div id='아이디'></div> 로 영역만 잡는다
( 기존 방식은 바로 <iframe src=""> 이지만 여기서부터 다릅니다 )
- 2. 유투브 API를 불러온다.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {alert("API 불러오기 완성");}
( API가 정상적으로 불러왔다면 API 불러오기 완성이란 문구가 나오게 됩니다 )
- 3. API호출이 성공하면 alert("API 불러오기 완성"); 을 지우고 동작을 정의한다
function onYouTubeIframeAPIReadyplayer new '아이디'videoId
( 이 과정이 중요합니다. 우선 YT.Player('아이디' 영역을 선택후 유투브 아이디 bXlrqQKbjSM 을 입력 합니다.
이렇게 하면 자동적으로 <div id='아이디'></div> 에 iframe이 들어가게 됩니다.
- 4. 유투브 API관련 기능을 하기 위해선 player 변수를 이용하면 된다.
예) 동영상을 정지하고 싶을때
function stopVideo() {
player.stopVideo();
}호출하면 동영상이 정지 된다.
이렇게 동작을 하게 됩니다. 동작또한 정상 동작이 됬습니다. 그러면 이제 본격적으로 무엇이 문제인지 말씀드리겠습니다.
우선 DB에 따라 유투브 아이디가 1~에서 xxx개까지 늘어나게 됩니다. 그러면 위에
3번 과정에서
var Player1;
var Player2;
var Player3; 이런식으로 3개의 변수를 만들고
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('아이디', {
videoId: 'bXlrqQKbjSM'
});
player2 = new YT.Player('아이디', {
videoId: 'bXlrqQKbjSM'
});
player3 = new YT.Player('아이디', {
videoId: 'bXlrqQKbjSM'
});
}
이렇게 3개로 영역과 유투브 아이디를 각각 설정해주어야 합니다. 그다음에 정지 버튼을 누를시
function stopVideo() {
player1.stopVideo();
player2.stopVideo();
player3.stopVideo();
}
이런 함수도 작성해야 합니다. 유투브 아이디가 고정이 아닌 항시 바뀌기 때문에 이과정을 어떻게 해야 할지 모르겠습니다.
for문을 이용하여 이러한 과정을 해결할수 있을까요?
제가 생각한 방법으론 말도 안되긴 하지만;;
---> var player = []; // 배열을 위해 이렇게 배열 설정
function onYouTubeIframeAPIReadyplayer new '아이디'videoId
for(var i=0; i<db.length; i++){ // DB에 유투브 아이디 만큼 for문 player[i] = new YT.Player('아이디'+i, {
videoId: 'db.youtube_id[i]'
});
}
function stopVideo() {
player.stopVideo(); ----> or(var i=0; i<db.length; i++){ // DB에 유투브 아이디 만큼 for문 });
}
이런 경우는 처음이라 이렇게 해도 될지 모르곘네요ㅠㅠ.. 아니면 다른 방법이 있을까요?
글이 좀 길어졌지만 한번만 읽어주시고 조언해 주시면 감사하겠습니다
본인삭제금지
글쓰기