YouTube API loadVideoById startSeconds가 작동하지 않습니다.

Question

내가 포함하고있는 일부 YouTube 동영상에 대해 챕터 선택기를 만들었습니다. 이 방법은 작동하지만 최근에 중단되었습니다. 나는 무슨 일이 일어나는지 알 수 없다.

나는 그들의 추천 형식을 사용하지만, 각 장

<div class="wrapper"> 

<div id="player"></div> 

<script type="text/javascript"> 
    var tag = document.createElement('script'); 

    tag.src = "http://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', { 
     width: '625', 
     videoId: 'FE5jN0rqMtM', 
     events: { 
     'onStateChange': onPlayerStateChange  
     }, 
     playerVars:{ 
     rel: 0, 
     wmode: "opaque" 
     }   
    }); 
    } 

    function onPlayerStateChange(evt) { 
    if (evt.data == 0) { 
      $('#video_popup').removeClass('hide_pop'); 
      $('#video_popup').addClass('display_pop'); 
    } 
    else if (evt.data == -1) { 
      $('#video_popup').removeClass('display_pop'); 
      $('#video_popup').addClass('hide_pop'); 
    } 
    else { 
      $('#video_popup').removeClass('display_pop'); 
      $('#video_popup').addClass('hide_pop'); 
    } 
    } 

    function chapter1() { 
     player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 0}); 
    } 

    function chapter2() { 
     player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 63}); 
    } 

    function chapter3() { 
     player.loadVideoById({'videoId': 'FE5jN0rqMtM', 'startSeconds': 135}); 
    } 

</script> 

<div id="video_popup" class="hide_pop"> 
    <div class="video_layover"> 
     <div class="promo">Thank you for watching!<br /><br /></div> 
     <div class="link"><a href="javascript: chapter1();">Replay Video</a></div> 
    </div> 
</div> 


    <div style="margin: 0 auto 20px auto; width:625px; height:98px; text-align:center;"> 
    <ul class="player"> 

      <a href="javascript: chapter1();"><li>Chapter 1</li></a> 


      <a href="javascript: chapter2();"><li>Chapter 2</li></a> 


      <a href="javascript: chapter3();"><li>Chapter 3</li></a> 

    </ul> 
    </div> 

Answer 1

나는 그것을 문서화 찾을 수 없습니다 비록 그것이 버그 같은데요에게 보여 loadVideoById와를 사용하고 있습니다. 원하는 경우 report the bug 수 있습니다. JS Bin

function chapter2() {  
    player.cueVideoById('FE5jN0rqMtM', 63); // BETTER WAY 
    player.playVideo(); 
} 

Answer 2

이 같은 오류가 발생하는 경우 "형식 오류를 : ytPlayer.loadVideoById는 함수가 아닙니다" 예 :

에 관계없이, 나는 cueVideoById가 모든 브라우저에서 나를 위해 노력하고 더 나은 방법이라고 생각 , 그러면 onReady 이벤트가 시작될 때까지 기다려야한다고 생각합니다. 나는 각 장을 클릭하면

var ytPlayer; 
    var ytPlayerIsReady = false; 


    // this methods only works if defined in the global scope !! 
    window.onYouTubeIframeAPIReady = function() { 
     ytPlayer = new YT.Player('ytplayer', { 
      playerVars: { 
       enablejsapi: 1, 
       controls: 0, 
       fs: 1, 
       autoplay: 1, 
       rel: 0, 
       showinfo: 0, 
       modestbranding: 1 
      }, 
      events: { 
       onReady: onReady, 
       onError: onError, 
       onStateChange: onStateChange 
      } 
     }); 
    }; 


    // youtube code for calling the iframe 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 onError(event) { 
     console.log("error with code" + event.data); 
    } 

    function onStateChange(event) { 
     console.log("change state to " + event.data); 
    } 

    function onReady(event) { 
     ytPlayerIsReady = true; 
     console.log("I'm ready"); 
    } 


    window.myVideoPlayer = { 
     init: function (options) { 


      // some arbitrary code... 
      // the trick is to fire options.callback, 
      // which contains all the logic needed 



      function timeout() { 
       setTimeout(function() { 
        if (false === ytPlayerIsReady) { 
         timeout(); 
        } 
        else { 
         if (options.callback) { 
          options.callback(); 
         } 
        } 
       }, 1000); 
      } 
      timeout(); 
     } 
    }; 


    myVideoPlayer.init({ 
     callback: function(){ 
      // now the youtube api is ready, you should be able to call 
      // loadVideoById without problems (at least it worked for me) 



      // ytPlayer.removeEventListener('onStateChange'); 
      // ytPlayer.addEventListener('onStateChange', '_myYtPlayerOnChange'); 
      // ytPlayer.loadVideoById({ 
      //  videoId: 'xxxx', 
      //  startSeconds: 12 
      // }); 

     } 
    });