Вопрос по youtube, youtube-api – YouTube iframe API через AJAX

3

У меня есть система, в которой основной контент загружается через ajax, внутри div основного «фрейма».

На некоторых страницах мне нужно отслеживать, когда пользователь заканчивает воспроизведение видео. Я пытаюсь использовать YouTube iframe API. Это работает нормально, но я бегу по некоторым странным вещам.

Основная проблема: действия, которые происходят, когда пользователь заканчивает просмотр видео, различны на каждой странице, и каким-то образом API складывает все функции и запускает все сразу.

Например, у меня есть первая страница, которая загружается через AJAX, и у меня есть этот фрагмент для загрузки видео YouTube:

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  if (window.YT)
  {
    window.YT = undefined;
  }

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player = undefined;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('divVideo', {
      playerapiid: 'somecode',
      height: '309',
      width: '439',
      videoId: 'somecode',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED ) {
     actionToScreen1()
    }
  }

</script>

Работает нормально. Но затем я загружаю контент для моей второй страницы, и теперь начинается проблема:

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  if (window.YT)
  {
    window.YT = undefined;
  }

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player = undefined;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('divVideo', {
      playerapiid: 'anothercode',
      height: '309',
      width: '439',
      videoId: 'anothercode',
      events: {
    'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED ) {
     actionToScreen2()
    }
  }

</script>

Когда видео на моем screen2 закончено, onPlayerStateChange вызывается дважды, один вызывает actionToScreen1 и другой actionToScreen2. Похоже, я просто загружаю контейнер через ajax, функция хранится несколько глобально, но я не могу найти где и не могу найти способ определить, какая функция вызывается. Как я могу это исправить?

Возможно ли будет удалить DOM Screen1 после загрузки Screen2? Callum McLean

Ваш Ответ

2   ответа
2

трудно сказать точно, в какой области находятся все ваши различные переменные, но вот несколько общих советов.

Так как вы не перезагружаете свою веб-страницу каждый раз, когда загружаете какой-то новый контент через AJAX, просто загрузитеhttps://www.youtube.com/iframe_api библиотеку один раз, с некоторой «родительской» страницы, вместо того, чтобы пытаться удалить ее, а затем перезагружать ее каждый раз, когда что-то новое добавляется.

Как продолжение этого, не слушайтеonYouTubeIframeAPIReady события, когда вы добавляете новый контент. Хорошим примером для использования является вызов метода для вызова видео; в этом методе, еслиplayer (установите на вашYT.Player экземпляр) определяется, затем вызватьplayer.cueVideo()/player.loadVideo(), Еслиplayer еще не определено, затем загрузитеhttps://www.youtube.com/iframe_api библиотеки в этой точке, и определитьonYouTubeIframeAPIReady функция, которая позаботится о вызовеYT.Player конструктор с правильным идентификатором видео после загрузки библиотеки.

Вот пример некоторого кода JavaScript, который делает это в значительной степени:https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js Он использует модули RequireJS, поэтому синтаксис немного отличается от того, что вы делаете, но общая идея та же. Вы бы назвали этот код из внешнего файла JS, который использует модуль черезplayer.playVideo(containerDiv, videoId)

1

я сдался и использовал идеальный обходной путь.

<iframe id="video-recorder" src="/site/recorder" scrolling="no"
            style="width: 400px; height: 260px; overflow: hidden;">
</iframe>

iframe позаботится о перезагрузке API и все ..

Это в фрейме. Убедитесь, что у вас одинаковый размер, чтобы все было видно:

<!doctype html><html><head>
<meta charset="utf-8">
<style>html,body { margin: 0; padding: 0; overflow: hidden; width: 400px; height: 260px; }</style>
<script src="http://www.youtube.com/iframe_api"></script>
<body>
    <div id="widget"></div>
    <div id="player"></div>

<script>
var widget;
var player;

function onYouTubeIframeAPIReady() {
    widget = new YT.UploadWidget('widget', {
        width: 400,
        height: 260,
        events: {
            'onUploadSuccess': onUploadSuccess,
            'onProcessingComplete': onProcessingComplete
        }
    });
}

Остальной код, например события и т. Д., Можно найти на официальной странице:https://developers.google.com/youtube/youtube_upload_widget

Похожие вопросы