Mam system, w którym główna zawartość jest ładowana przez ajax, wewnątrz div głównej „ramki”.

Na niektórych stronach muszę śledzić, kiedy użytkownik kończy odtwarzanie wideo. Próbuję użyć api yourube iframe. To działa dobrze, ale działam na dziwne rzeczy.

Główny problem: akcje, które miały się wydarzyć, gdy użytkownik zakończy oglądanie wideo, są różne na każdej stronie i jakoś interfejs API układa wszystkie funkcje i działa na raz.

Na przykład mam pierwszą stronę, która jest ładowana przez ajax, i mam ten fragment do załadowania filmu z 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>

To działa dobrze. Ale potem ładuję zawartość mojej drugiej strony, a teraz zaczyna się problem:

<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>

Gdy wideo na moim ekranie2 zostanie zakończone, onPlayerStateChange jest wywoływany dwa razy, jeden wywołujący actionToScreen1 i drugi actionToScreen2. Wygląda na to, że właśnie ładuję kontener przez ajax, funkcja jest przechowywana nieco globalnie, ale nie mogę znaleźć gdzie i nie mogę znaleźć sposobu na odróżnienie wywoływanej funkcji. Jak mogę to naprawić?