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