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

Question

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

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

http://jsfiddle.net/36vr2kjv/2/

<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

问题描述：

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

因此，在克隆 iframe 后，您的原始函数（保存在 中player）现在指向两个位置......因此造成混乱。

解决方案：

为了解决这个问题，我们可以使用占位符。基于 Youtube Player API Reference，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处理程序并运行$(event.target).find('youtube-player')（或类似的东西，API 不同，所以 YMMV）从当前/下一张/上一张幻灯片中访问播放器元素使用（或任何您命名的数据变量）访问播放器实例。$(event.target).find('youtube-player').data('YoutubeAPI')

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