обнаруживает, когда заканчивается видео youtube - javascript - не работает

Question

У меня есть видео YouTube в db (только их 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(); 
     } 
    }