3

我正在开发一个 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 脚本的本地版本。

4

2 回答 2

3

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

于 2013-10-21T01:40:30.537 回答
0

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

于 2014-12-17T00:23:54.960 回答