我正在开发一个Rails4应用程序,它将能够在我的应用程序页面中嵌入和播放Youtube上托管的视频.我需要了解视频播放器的一些事件,因此我要通过API调用来创建Youtube对象：

<script id="video_script" ></script>
<div id="player"></div>
<%= javascript_tag do %>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var scriptTag = $("script#video_script");
  scriptTag.parent()[0].insertBefore(tag, scriptTag[0]);

  var youtube_player;
  function onYouTubeIframeAPIReady() {
    youtube_player = new YT.Player('player', {
      videoId: <%= @video.id %>,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    ....
  }

  function onPlayerStateChange(event) {
     ....
  }    
<% end %>

当首次加载页面时,此方法效果很好,但是当用户在启用了涡轮链接的页面之间导航时,该方法不起作用,因为文档就绪事件不会触发,因此,Youtube代码不知道发出回调到onYouTubeIframeAPIReady().

因此,我想知道是否有任何解决方法,除了document.ready事件外,是否可以使Youtube API调用page：change事件的API Ready方法以使其与Turbolink一起使用？我曾尝试浏览从Youtube下载的api脚本,但在其中找不到能解决该问题的任何内容,而且我还有些犹豫,无法运行本地版本的Youtube脚本.

解决方法:

Turbolinks仅重新加载标题和正文的内容(因此请注意不要使用过多的脚本来污染头部).为了避免这种情况,我检查YT对象是否存在.另外,在turbolinks’page：load’事件中,我还对onYouTubeIframeAPIReady进行了其他调用.

<script type="text/javascript">
/* load youtube js api */
var reloadYoutube = function () {
   /* if YT already initialized return */
   if (window.YT) { return; };
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
};
reloadYoutube();
$(document).on('page:load', function() {
    onYouTubeIframeAPIReady && onYouTubeIframeAPIReady();
});

/* youtube callback */
var ytplayer = null;
function onYouTubeIframeAPIReady() {
    // it is important to return when window.ytplayer 
    // is already created - because you will be missing
    // certain methods like getCurrentTime
    if (!window.YT || window.ytplayer) {
        return;
    }
    ytplayer = new YT.Player('main_player_div', {
        height: '315',
        width: '560',
        videoId: getVideoId(),
        events: {
            'onReady': onPlayerReady
        }
    });
}