2014-06-19 5 views
0

유튜브 API를 사용하여 재생을 마친 후 YouTube 비디오를 리디렉션하는 데 문제가 있습니다. 스타일을 지정하기위한 CSS 코드가 있지만이 경우에는 별 문제가되지 않습니다. 모든 hep는 감사하겠습니다. 편집 : 나는 이것이 응답하고 싶습니다. 여기 내 코드는 다음과 같습니다 :자동 재생 유튜브 비디오를 전체 화면으로 리디렉션

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <HEAD> 
    <LINK href="style.css" rel="stylesheet" type="text/css"> 
    </HEAD> 
    <BODY> 
    <div class="video-container"> 
     <iframe src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe> 
</div> 
</HTML> 

    <div id="player"></div> 
    <script> 
    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // create youtube player 
     var player; 
     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('player', { 
      height='' 
      width='' 
       videoId: '0Bmhjf0rKe8', 
       playerVars:{'rel':0,'showinfo':1,'autoplay':1} 
       events: { 

       'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 



     // when video ends 
     function onPlayerStateChange(event) {   
      if(!event.data)   
       GoHome(); 
     } 
     function GoHome(){ 
      window.location = 'http://www.google.com'; 
     } 


    </script> 

답변

1

비디오가 끝날 때 event.data == 2. 또한 쉼표를 개체 항목의 구분 기호로 사용하지 않았습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <HEAD> 
    <LINK href="style.css" rel="stylesheet" type="text/css"> 
    </HEAD> 
    <BODY> 
<!-- 
    <div class="video-container"> 
    <iframe src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe> 
</div> 
--> 
    <div id="player"></div> 

    <script> 
    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // create youtube player 
     var player; 
     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('player', { 
       height: '768', 
       width: '1024', 
       videoId: '0Bmhjf0rKe8', 
       playerVars:{'rel':0,'showinfo':1,'autoplay':1}, 
       events: { 
       'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 



     // when video ends 
     function onPlayerStateChange(event) { 
      //alert (event.data); 
      if (event.data == 0) 
        GoHome(); 
     } 
     function GoHome(){ 
      window.location = 'http://www.google.com'; 
     } 

    </script> 
</BODY> 
</HTML> 
+0

이 전체 화면으로 재생되지 않습니다 다음은 작업 예 (: 첫 번째 iframe이는 것을 주석 처리 참고)입니다. 전체 화면으로 재생하거나 반응적일 수있는 옵션이 있습니까? – Anastasia

+0

죄송합니다. 원래 게시물에 전체 화면 또는 응답 가능하게 추가하는 것을 잊어 버렸습니다. – Anastasia

+0

@Anastasia 사용자에게 iframe의 아이콘을 클릭하여 전체 화면으로 이동할 수있는 옵션 만 제공합니다. 기본적으로이 아이콘은 iframe의 오른쪽 하단에 있습니다. 반응 적이라면 iframe의 사용 가능한 공간에 따라 자동 크기 조정이 이루어져야합니다. – Als

관련 문제