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()。

所以，我想知道是否有任何解决方法可以让Youtube API为page:change事件调用API Ready方法，使其与turbolinks一起使用，此外还有document.ready事件？我试过挖掘从Youtube上下载的api脚本，但在那里找不到任何可以解决问题的东西，而且我对运行Youtube脚本的本地版本也有点犹豫。

Answer 1

Turbolinks仅重新加载标题和正文的内容（因此请注意有太多脚本的污染头）。为了避免它，我检查是否存在YT对象。另外，我还会在turbolinks页面上对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
        }
    });
}

Answer 2

使用jquery-turbolinks gem，https://github.com/kossnocorp/jquery.turbolinks。然后确保将代码包装在$（document）.ready（）中。

Youtube能与Turbolinks很好地配合吗？

2 个答案: