youtube iframe api 通过 ajax答案

【问题标题】：youtube iframe api through ajaxyoutube iframe api 通过 ajax
【发布时间】：2013-03-28 02:10:06
【问题描述】：

我有一个系统，主要内容是通过 ajax 加载的，在主“框架”的 div 内。

在某些页面中，我需要跟踪用户播放完视频的时间。我正在尝试使用 youtube iframe api。它工作正常，但我正在处理一些奇怪的事情。

主要问题：用户观看完视频后发生的操作在每个页面上都不同，不知何故，API 将所有功能堆叠在一起并同时运行。

例如，我有第一页，它是通过 ajax 加载的，并且有这个 sn-p 来加载 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 加载容器，该函数在某种程度上是全局存储的，但我找不到在哪里，也找不到区分正在调用哪个函数的方法。我该如何解决这个问题？

【问题讨论】：

是否有可能在 Screen2 加载后移除 Screen1 DOM？

标签： youtube youtube-api

【解决方案1】：

如果不查看您的实际页面，很难准确判断所有不同变量的范围，但这里有一些一般性建议。

由于每次通过 AJAX 加载一些新内容时您并没有完全重新加载网页，因此只需从某个“父”页面加载一次 https://www.youtube.com/iframe_api 库，而不是尝试删除它然后重新加载它每次有新的东西被拉进来。

作为扩展，当您引入新内容时不要监听onYouTubeIframeAPIReady 事件。一个好的模式是调用一个方法来提示视频；在该方法中，如果定义了player（设置为您的YT.Player 实例），则调用player.cueVideo()/player.loadVideo()。如果尚未定义player，则在此时加载https://www.youtube.com/iframe_api 库，并定义一个onYouTubeIframeAPIReady 函数，该函数将负责在加载库后使用正确的视频ID 调用YT.Player 构造函数。

下面是一些 JavaScript 代码的示例：https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js 它使用 RequireJS 模块，因此语法与您正在执行的操作略有不同，但总体思路是相同的。您可以通过player.playVideo(containerDiv, videoId)从使用该模块的外部 JS 文件中调用该代码

【讨论】：

【解决方案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

【讨论】：