通过Ajax的YouTube API的iframe(youtube iframe api throu

我有其中的主要内容是通过AJAX加载，主“帧”的一个div内部s的系统。

在一些网页上，我需要当用户完成播放视频跟踪。我试图使用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>

当我的屏幕2视频播放结束后，onPlayerStateChange被调用了两次，一个叫actionToScreen1等actionToScreen2。貌似我只是加载通过Ajax的容器，该函数存储有所全球范围内，但我找不到在哪里，并不能找到一个办法来区分被调用哪个函数。我怎样才能解决这个问题？

Answer 1:

不看你的实际页面很难确切说出范围内的所有您的不同变量中，但这里的一些普遍性的建议。

既然你不能完全在您每次通过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构造与正确的视频ID一旦库加载。

下面是确实相当多，一些JavaScript代码的例子： https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js它采用RequireJS模块，因此语法是比你在做什么，有一点不同，但总的想法是一样的。你会调用代码从使用通过模块的外部JS文件player.playVideo(containerDiv, videoId)

Answer 2:

尝试各种解决方案之后，我放弃了，并用一个完美的解决方法。

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

该iframe将API和一切的重装照顾..

这是在iframe。请确保您有相同的大小，使所有可见：

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

文章来源: youtube iframe api through ajax