Question

使用YouTube Frame API，我从Google文档中获取了示例代码，该代码会在6秒后暂停传递给iframe的视频：

var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {

      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

这一切都很好，但是我在另一个div中加载了视频，这个视频定位了iframe，并且它们没有响应这个事件监听器（即它们在6秒后继续播放）。为什么是这样？是不是仍然不一样的iframe？在查看页面源代码时，id和名称似乎会被检出。

编辑：注意到在运行Inspect Element时，iframe不会改变，即源代码中的视频仍然与初始视频相同，而不是新加载的视频。一个线索，但我现在只是有点困惑。

Answer 1

“玩家”是iframe附加的地方

player = new YT.Player('player', {

这样称呼：

video = document.getElementById('iFrameID'); //JQuery would be $("#iFrameID");
player = new YT.Player(video, {

如果您希望一次控制多个视频，则需要尝试使用多个YT.Player对象或运行，或许您可以使用类而不是ID。

YouTube Frame API：仅适用于初始视频的事件监听器

1 个答案: