Может ли Youtube хорошо работать с Turbolinks?

Я разрабатываю приложение Rails4, которое сможет вставлять и воспроизводить видео, размещенные на Youtube, на страницах моего приложения. Мне нужно подключиться к некоторым событиям видеоплеера, поэтому я создаю объект Youtube с помощью вызова API:

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

Итак, мне было интересно, есть ли обходной путь, который заставил бы API Youtube вызывать метод API Ready для события page:change, чтобы заставить его работать с турбоссылками, в дополнение к событию document.ready? Я пытался копаться в скрипте API, который загружается с Youtube, но не смог найти там ничего, что могло бы решить проблему, и я также немного не решаюсь запускать локальную версию скрипта Youtube.


javascript jquery youtube turbolinks ruby-on-rails-4
person ams11    schedule 11.09.2013    source источник
comment
Кто угодно? До сих пор никто не сталкивался со способом встраивания видео с Youtube на страницы с поддержкой турболинков?   -  person ams11    schedule 14.09.2013

Ответы (2)


arrow_upward
3
arrow_downward

Турболинки перезагружают только содержимое заголовка и тела (так что следите за тем, чтобы заголовок не засорялся слишком большим количеством скриптов). Чтобы избежать этого, я проверяю, существует ли объект YT. Кроме того, я делаю дополнительный вызов 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
        }
    });
}

person MorioBoncz    schedule 21.10.2013

arrow_upward
0
arrow_downward

Используйте гем jquery-turbolinks, https://github.com/kossnocorp/jquery.turbolinks . Затем просто оберните свой код в $(document).ready().

person justinlyman    schedule 17.12.2014