Play and Pause Buttons for multiple YouTube videos on the same page

问题

I need to embed youtube videos on a webpage, and I want to control my videos with custom controls buttons (play / pause / progress bar), using the youtube player API.

I used a tutorial (https://css-tricks.com/play-button-youtube-and-vimeo-api/) and added some custom and it works fine :

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);
});

The problem is that I want to embed more than one video, unlimited videos. And when there's more than 1 video, only my first video get initialised, and the controls only works for my first video.

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

I tried to add "each" function, but I can manage to make it work...

can anyone help me with this ?

回答1:

Here's my input and code I'm using for two videos on the same page. It's not beautiful and slim but it works and is maybe helpful.

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

来源：https://stackoverflow.com/questions/42073012/play-and-pause-buttons-for-multiple-youtube-videos-on-the-same-page