Youtube Javascript API, Pjax, wie auf youTubeIframeAPIReady();

Question

Ich habe ein Problem mit der Youtube-JavaScript-Player-API.

Ich nenne die JS-Code:

function onYouTubeIframeAPIReady() { 
    var podcast = document.getElementById('podcast') 
    var player = new YT.Player(document.getElementById('podcast')); 
    player.addEventListener('onStateChange', function(e) { 
    if (e.data === 1) { 
     alert("play"); 
    } 
    }); 
}; 

mit diesem HTML-Code:

<iframe id="podcast" type="text/html" width="720" height="405" 
src="https://www.youtube.com/embed/XXXXXX?cc_load_policy=1&enablejsapi=1&theme=light" 
frameborder="0" allowfullscreen> 

Das Problem ist, dass ich das pjax System verwenden, so dass die globalen JavaScript-Code wird nicht neu geladen, wenn ich navigieren . Also, ich lade einen Teil meines Javascript-Codes, wenn Pjax: Erfolg. Ich habe so etwas versucht:

$(document).on('pjax:success', function() { 
    onYouTubeIframeAPIReady(); 
} 

aber es funktioniert nicht. Meine Frage ist, wie man auf YouYouIframeAPIReady() neu lädt; wenn es global definiert werden muss, wie es dort heißt onYouTubeIframeAPIReady function is not calling

Answer 1

Wenn mein Player definiert ist, verwende ich nicht onYoutubePlayerAPIReady. Es ist die beste Lösung, die ich finde, und es funktioniert.

var player = { 
    playVideo: function(container, videoId) { 
     if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { 
      window.onYouTubePlayerAPIReady = function() { 
       player.loadPlayer(container, videoId); 
      }; 
      $.getScript('//www.youtube.com/player_api'); 
     } else { 
      player.loadPlayer(container, videoId); 
     } 
    }, 
    loadPlayer: function(container, videoId) { 
     window.myPlayer = new YT.Player(container, 
      height: 200, 
      width: 200, 
      videoId: videoId, 
     }); 
    } 
}; 


var containerId = 'podcast'; 
var videoId = '<%= @youtube_id %>'; 
player.playVideo(containerId, videoId);