同一页面上多个YouTube视频的播放和暂停按钮 [英] Play and Pause Buttons for multiple YouTube videos on the same page

问题描述

我需要将youtube视频嵌入网页中，并且我想使用youtube播放器API使用自定义控件按钮(播放/暂停/进度栏)来控制我的视频.

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.

我使用了一个教程( https://css-tricks .com/play-button-youtube-and-vimeo-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...

有人可以帮我吗?

推荐答案

这是我在同一页面上用于两个视频的输入和代码.它虽然不纤细但很实用，但可能会有所帮助.

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>

这篇关于同一页面上多个YouTube视频的播放和暂停按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！