youtube iframe api 通过 ajax [英] youtube iframe api through ajax

问题描述

我有一个系统，其中主要内容通过 ajax 加载，位于主框架"的 div 内.

I have s system where the main content is loaded through ajax, inside a div of the main 'frame'.

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

In some pages, I need to track when the user finish playing a video. I'm trying to use youtube iframe api. It works ok, but I'm running on some strange things.

主要问题:用户看完视频后，每个页面的动作都不一样，不知何故，API 把所有的功能都堆叠起来，同时运行.

The main problem: the actions to happened when the user finishes watching the video are different on each page, and somehow, the API is stacking all the functions and running all at once.

例如，我有第一页，通过 ajax 加载，并使用此代码段加载 youtube 视频:

By example, I have the first page, that is loaded through ajax, and have this snippet to load youtube video:

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

它工作正常.但是，我加载了第二页的内容，现在问题开始了:

It works ok. But then, I load the content for my page two, and now the problem begins:

<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加载容器，该函数有点全局存储，但我找不到在哪里，也找不到区分调用哪个函数的方法.我该如何解决这个问题?

When the video on my screen2 is finished, onPlayerStateChange is called twice, one calling actionToScreen1 and other actionToScreen2. Looks like I'm just loading the container through ajax, the function is stored somewhat globally, but I can't find where, and can't find a way to differentiate which function is being called. How can I fix this?

推荐答案

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

Without looking at your actual page it's hard to tell exactly what scope all your different variables are in, but here's some general advice.

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

Since you're not completely reloading your web page each time you load in some new content via AJAX, just load the https://www.youtube.com/iframe_api library once, from some "parent" page, instead of trying to delete it and then reload it each time something new is pulled in.

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

As an extension of that, don't listen for onYouTubeIframeAPIReady events whenever you're pulling in new content. A good pattern to use is to call a method to cue up a video; in that method, if player (set to your YT.Player instance) is defined, then call player.cueVideo()/player.loadVideo(). If player isn't defined yet, then load the https://www.youtube.com/iframe_api library at that point, and define a onYouTubeIframeAPIReady function that will take care of calling the YT.Player constructor with the correct video id once the library is loaded.

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

Here's an example of some JavaScript code that does pretty much that: https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js It uses RequireJS modules, so the syntax is a little different than what you're doing, but the general idea is the same. You would call that code from an external JS file that uses the module via player.playVideo(containerDiv, videoId)

这篇关于youtube iframe api 通过 ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！