檢測YouTube視頻結束時 - javascript - 不起作用

Question

我有db中的youtube視頻（只有他們的url）。他們以這種形式：

http://www.youtube.com/embed/CT1909pdGBU

現在，我想，當檢測到影片結束，看樣東西來代替視頻容器的人。

我嘗試下列步驟操作：

1. changed the above youtube url to: 

http://www.youtube.com/embed/CT1909pdGBU?version=3&enablejsapi=1

2. added this js code in videopage.html 

    var player; 
    function onYouTubePlayerAPIReady() { 
     alert('api ready!'); 
     player = new YT.Player('player', { 
      events: { 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 
    // when video ends 
    function onPlayerStateChange(event) { 
     if(event.data === 0) { 
      alert('done'); 
     } 
    } 

但我越來越沒有"api ready!"也不"done"警報..我究竟做錯了什麼？

Answer 1

很簡單：

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

    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('myyoutubevideo_iframe_div', { 
      height: '410', 
      width: '100%', 
      videoId: '{{ video.yt_id }}', 
      events: { 
       'onReady': onPlayerReady, 
       'onStateChange': onPlayerStateChange 
      } 
     }); 
    } 
    function onPlayerReady(event) { 
     event.target.playVideo(); 
    } 
    var done = false; 
    function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.ENDED) { 
      $('#myyoutubevideo_iframe_div').hide(); 
      $('#aftervideo_div').show(); 
     } 
    }