播放和暂停在同一页上的多个YouTube视频按钮(Play and Pause Buttons fo

我需要嵌入在网页上的YouTube视频，我想控制我的影片与自定义控件按钮（播放/暂停/进度条），使用YouTube播放器API。

我用了一个教程（ https://css-tricks.com/play-button-youtube-and-vimeo-api/ ）并增加了一些自定义的，它工作正常：

https://jsfiddle.net/tpo6sgzf/

/* VIDEO */

var player,
    time_update_interval = 0;

function onYouTubeIframeAPIReady() {

    player = new YT.Player('video', {
        events: {
            onReady: initialize
        }
    });
}

function initialize(){
   // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000);

    $('#volume-input').val(Math.round(player.getVolume()));
}

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

// Progress bar
$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});

// Playback

$('#play_button').on('click', function () {
    player.playVideo();
});

$('#pause_button').on('click', function () {
    player.pauseVideo();
});

// Helper Functions
function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}

$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});

问题是，我想嵌入了多个视频，无限的影片。而且，当有多个视频，只是我的第一部影片获得初始化，与对照组只适用于我的第一部影片。

https://jsfiddle.net/tpo6sgzf/1/

我尝试添加“每个”功能，但我可以管理，使其工作...

谁能帮我这个？

这里是我的输入和代码我使用在同一页上的两个视频。这不是漂亮，苗条，但它的工作原理，并可能有助于。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
    // https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;
var player2;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
  player2 = new YT.Player('video2', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}





function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  document.getElementById('thumbnail').style.display = 'none';
 $('#play-button').hide(0); 
 $('#pause-button').show(0);    
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  document.getElementById('thumbnail').style.display = 'block';
 $('#play-button').show(0); 
 $('#pause-button').hide(0);    
  });

    // bind events
  var playButton2 = document.getElementById("play-button2");
  playButton2.addEventListener("click", function() {
    player2.playVideo();
  document.getElementById('thumbnail2').style.display = 'none';
 $('#play-button2').hide(0);
 $('#pause-button2').show(0);   
  });

  var pauseButton2 = document.getElementById("pause-button2");
  pauseButton2.addEventListener("click", function() {
    player2.pauseVideo();
  document.getElementById('thumbnail2').style.display = 'block';
 $('#play-button2').show(0);    
 $('#pause-button2').hide(0);   
  });

}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>