在同一页面上播放和暂停多个YouTubevideo的按钮

我需要在网页上嵌入YouTubevideo，我想使用youtube播放器API通过自定义控件按钮（播放/暂停/进度条）控制我的video。

我使用了一个教程（ 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); }); 

问题是我想嵌入多个video，无限制的video。 当有超过1个video时，只有我的第一个video被初始化，并且控件仅适用于我的第一个video。

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

我试图添加“每个”function，但我可以设法让它工作……

谁能帮我这个 ？

Answer 1

这是我在同一页面上用于两个video的输入和代码。 它不漂亮而且纤薄但它有效并且可能有用。