问题描述：

Question

我为YouTube视频制作了暂停按钮。这工作正常，但现在我需要克隆视频。这是由于我使用的旋转木马如何工作，以及视频可以在灯箱中显示。

以下是我的代码的简化版本。现在，暂停按钮仅适用于第一个视频。如何制作一个可以暂停所有克隆视频的按钮？

<p class="trigger">Trigger</p>
<p class="trigger2">Trigger2</p>

<div class="player-wrap">
  <div id="player"></div>
</div>

<div id="player2"></div>

var player;

$(function() {
    // 2. This code loads the IFrame Player API code asynchronously.
      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.
      onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. 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.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }

        $('.trigger').click(function(){
            //this works
            player.pauseVideo()
        });

    return player;
});

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

$(function() {
    $('.trigger2').click(function(){
            // this does not work
            player.pauseVideo()
        });
});

Answer 1

实际上存在深度克隆和浅层克隆的概念。浅层克隆不会复制事件，因此您必须使用深度克隆。你在哪里使用clone（）而不是使用clone（true）。例如，在上面的代码段中，您可以使用：

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

Answer 2

<小时/>

问题描述：

<小时/> 您的代码中发生的事情是您在单个DOM加载中克隆并创建两个ID，这意味着您的javascript将具有冲突的ID来处理。另一个问题是youtube API创建函数绑定到ID而不是类。

所以在你克隆了你的iframe之后，你的原始函数（保存在player中）现在指向两个地方......因此引起了混乱。

<小时/>

解决方案：

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

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

[见Youtube API#Queueing_Functions]

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

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处理程序从当前/下一张/上一张幻灯片中访问播放器元素并运行{ {1}}（或者类似的东西，API是不同的，所以是YMMV）并使用$(event.target).find('youtube-player')（或者你命名为数据变量的任何东西）访问播放器实例。

然后你只需从原始对象中找到视频ID（使用上面的访问方案并从youtubeAPI对象中获取id），然后使用上面的API调用将视频加载到占位符中。

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

2 个答案:

问题描述：

解决方案：