Youtube API 다중 동영상 제어

 

Youtube 영상을 다중으로 이리저리 제어하는 프로젝트 중이라.
본의 아니게 Youtube API를 열심히 만지고 있다.

 

지금까지 내가 알게된 바는..

 

1. local 작업시, IE에서는 playVideo()와 같은 명령어가 듣지 않는다.
   - ftp 에 업로드 후 확인 결과 정상으로 나온다.
   
   
2. chrome 은 최근 업데이트를 통해 playVideo()를 막아버렸다.
   - iframe으로 동영상을 추가한 경우, 웹접근성과 관련하여 이번 업데이트가 이뤄진 것으로 추정된다.
   무조건 클릭이 되어야만 재생이 되는데. 한가지 꼼수는 mute (음소거) 상태로 재생시에는 playVideo()가 먹힌다.
   - iframe 으로 넣어서 api를 연결해준 경우가 아닌, api 내에서 iframe을 만들어버린 경우엔 unMute상태로 play가 가능하다. 
   
   
3. stopVideo()와 puauseVideo()는 당연히 다르다. (정지와, 일시정지의 차이)
   
   

이런 자잘자잘한 것들이 있다.
하지만 이것만 정리하겠다고 포스팅을 쓰는 것은 당연히 아니올시다.

진짜 며칠을 구글링과 열심히 짜는 것을 반복하며 얻은 결과는 일단 제어가 됐다는 것이고,
아래 블로그 포스팅에서 굉장히 많은 힌트를 얻었다. 
http://naminsik.com/blog/3169

lab.naminsik

일단 위의 포스팅만 본다면, 다중으로 간편하게 여러개의 Youtube iframe 동영상 삽입이 가능해진다. 
그러나, 동영상 삽입을 넘어서 그걸 제어하고 싶다면 조금 더 손을 써야 한다. 
나의 짧은 지식을 동원한 방법은 이러하다.

 

var ary = []; 
// for문을 통해 각각 만들어지는 youtube 객체를 담을 배열을 만든다.
// 해당 배열에 for문(위 블로그 참조)을 통해 만들어진 객체를 push해서 넣는다.

for (var i = 0; i < 객체길이 ; i++){
  // 블라블라블라. 객체 만드는 중 

  ary.push(만들어진 youtube 객체);
}

이렇게 하면 일단 객체를 하나씩 담아서 그걸 불러와 쓸 수 있어진다.
물론 원하는 배열 순서를 찾는 JS도 들어가야한다.
그건 각자의 환경에 따라 달라질 수 있어서 내가 정리할 부분은 아니니 패스.

그리고 마지막으로 하나.
click, mouseover나 이런 것들이 아닌 조건문에 한해서 playVideo()와 같은 명령어를 써야하는데 안된다면,
function에 넣어서  setTimeout(function, 시간) 으로 써보길 추천한다. 

 

 

+ update

문득 youtube api 를 통해서 플레이어가 생성되는 경우에는 크롬에서 unMute 상태로 자동재생이 된다는 것을 발견했다.
문제는 역시나 다중 동영상을 만들어내는 것이 문제였는데 이또한, 위에서 가장 중요하게 말한 "객체"를 "배열"에 넣는 방식으로 해결 할 수 있었다.
막상, 이 개념을 파악하고 나니, 동영상 컨트롤이 정말 쉬워졌다. (코드도 더 깔끔해짐)

<div class="yotube" data-url="각 동영상의 아이디">
<div class="yotube" data-url="각 동영상의 아이디">
<div class="yotube" data-url="각 동영상의 아이디">
// 해당 div.youtube 가, iframe 으로 변경된다. 

var idAry = [], urlAry = [], objAry = []; 
// 플레이어를 만들어줄 아이디값 넣을 배열, 각 동영상 url을 넣을 배열, 플레이어 객체를 넣을 배열이다.

$(".youtube").each(function(i){
 $(this).attr("id", "player"+i); // 아이디 값 추가
 idAry.push("player"+i); // 아이디 값 배열에 넣기
 urlAry.push($(this).data("url")); // 동영상 url 배열에 넣기
});

function onYouTubeIframeAPIReady() { // 이 함수가 동영상 iframe을 만들어주는 함수이다.
 for (var i=0; i< $(".youtube").length; i++){ // 동영상을 원하는만큼 만들어주기 위해.
   var player;
   var playerId = idAry[i];
   player = new YT.Player(playerId, {
       videoId: urlAry[i],
       width : "100%",
       height: "100%",
       playerVars: {
          rel : 0
          .
          .
          // 원하는 속성 쓰기
       }
   });
   objAry.push(player); 
   // 가장 중요한 대목! 변수 player에 각 동영상 마다 만들어진 객체를 objAry 배열에 넣어준다.
   // 그래야 후에 원하는 동영상 제어를 할 수 있다.
 }
}

이렇게해서 후에 조건에 맞게 원하는 동영상을 제어하고 싶다면, 아래와 같은 형태로 제어할 수 있다.

objAry[객체순서].playVideo();

위에서도 정리했었지만,
가장 중요한건 player 안에 담긴 객체를 배열에 넣고, 해당 객체를 제어한다는 것에 초점이 맞춰져야한다.
위에 첨부한 블로그 포스팅은  iframe을 넣는 것까지 가능하고, 해당 객체를 배열에 넣어 제어는 가능하지만,
iframe으로 만들어진 형태라 자동재생시 크롬에서 막힌다는 이슈가 있다. (mute를 통해 자동재생이 가능은 하지만 말이다.)
그러니, 아래 정리한 토대로 하는게 더욱 편하리라 생각한다.