javascript - Youtube 可以很好地与 Turbolinks 一起玩吗？

Question

我正在开发一个 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 %>

这在页面首次加载时非常有效，但当用户在启用了 turbolinks 的页面之间导航时不起作用，因为文档就绪事件不会触发，因此 Youtube 代码不知道要发出onYouTubeIframeAPIReady() 的回调。

所以，除了 document.ready 事件？我已经尝试挖掘从 Youtube 下载的 api 脚本，但在其中找不到任何可以解决问题的东西，而且我也有点犹豫要不要运行本地版本的 Youtube 脚本。

Answer 1

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
        }
    });
}