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 加载容器，该函数在某种程度上存储在全局范围内，但我找不到位置，也找不到区分调用哪个函数的方法。我怎样才能解决这个问题？

4

2 回答 2

2

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

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

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

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

于 2013-04-09T21:10:45.937 回答
1

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

<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

于 2013-10-08T17:43:57.153 回答