jquery - 同一页面上多个YouTube视频的播放和暂停按钮

Question

我需要将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/

我试图添加“每个”功能，但我可以设法使其工作...

谁能帮我这个 ？

Answer 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>