Youtube api 已克隆的YouTube视频的JavaScript暂停按钮？

我为YouTube视频制作了一个暂停按钮。这很好，但现在我需要克隆视频。这是因为im使用的转盘是如何工作的，而且视频可以显示在灯箱中

下面是我的代码的简化版本。现在，暂停按钮仅在第一个视频上起作用。如何制作一个按钮来暂停所有克隆视频

触发器

触发器2

var播放器； $（函数（）{ //2.此代码异步加载IFrame播放器API代码。 var tag=document.createElement（'script'）； tag.src=”https://www.youtube.com/iframe_api"; var firstScriptTag=document.getElementsByTagName（'script'）[0]； firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）； //3.此函数创建（和YouTube播放器） //API代码下载后。 onyoutubeiframeapiredy=函数onyoutubeiframeapiredy（）{ player=新的YT.player（'player'{ 高度：“390”， 宽度：“640”， videoId:'M7lc1UVf VE'， 活动：{ “onReady”：onPlayerReady， “onStateChange”：onPlayerStateChange } }); } //4.当视频播放器准备就绪时，API将调用此函数。 函数onPlayerReady（事件）{ event.target.playVideo（）； } //5.当播放器的状态发生变化时，API调用此函数。 //该功能指示播放视频时（状态=1）， //玩家应该玩六秒钟，然后停下来。 var done=false； 函数onPlayerStateChange（事件）{ 如果（event.data==YT.PlayerState.PLAYING&&！done）{ 设置超时（停止视频，6000）； 完成=正确； } } 函数stopVideo（）{ player.stopVideo（）； } $（'.trigger'）。单击（函数（）{ //这很有效 player.pauseVideo（） }); 返回球员； }); $（函数（）{ setTimeout（函数（）{ $（'.player wrap'）.clone（）.appendTo（'#player2'）； }, 2000); }); $（函数（）{ $（'.trigger2'）。单击（函数（）{ //这行不通 player.pauseVideo（） }); });

---

发行说明:

---

代码中发生的事情是在一个DOM负载中克隆和创建两个ID，这意味着您的javascript将有冲突的ID需要处理。另一个问题是youtube API创建函数绑定到ID而不是类

因此，在克隆iframe之后，原始函数（保存在

player

中）现在指向两个位置。。。因此产生了混乱

---

解决方案：

---

为了解决这个问题，我们可以使用占位符。基于Youtube播放器API参考，Youtube允许将视频加载到播放器对象

player.loadVideoById(videoId:String,
                     startSeconds:Number,
                     suggestedQuality:String):Void

[见]

我们可以使用类和对象引用来实现您的目标：

player;
placeholder;
playerCount = 1;
$(function() {

      // ... Previous code ... //

      /**
      * Assuming you have more than one video to play, 
      * the function will change to allow for incrementing the ids
      * of each player made. [UNIQUE IDS]
      */
      onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
        player = new YT.Player('player-'+playerCount, {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        placeholder = new YT.Player('placeholder', {
          height: '390',
          width: '640',
        });

          /**
          * Now add a generic class so we can find all of these elements,
          * and bind the object to a data instance for access later.
          */
          $('#player-' + playerCount).addClass('youtube-player').data('YoutubeAPI', player);

          playerCount++;
      }

占位符现在起作用了，当您旋转木马触发它的

beforeChange

事件时，您可以使用旋转木马的

事件处理程序并运行
$（event.target）。查找（'youtube-player'）
（或者类似的，API是不同的，所以YMMV）从当前/下一张/上一张幻灯片中访问播放器元素并使用
$（event.target）访问播放器实例。查找（'youtube-player'）.data（'YoutubeAPI'）
（或任何您命名的数据变量）

然后，您只需从原始对象中找到视频id（使用上面的访问方案并从youtubeAPI对象获取id），然后使用上面的API调用将视频加载到占位符中。
实际上有深度克隆和浅层克隆的概念。浅层克隆不会复制事件，因此必须使用深度克隆。无论在何处使用clone（），都应使用clone（true）。
例如，在上述代码段中，您可以使用：

  $(function() {
    setTimeout(function(){
        $('.player-wrap').clone(true).appendTo('#player2');
    }, 2000);
});

似乎比你之前发布的类似代码更接近，是的，但是一个非常不同的问题。我做错什么了吗？它似乎不起作用：
  $(function() {
    setTimeout(function(){
        $('.player-wrap').clone(true).appendTo('#player2');
    }, 2000);
});