JavaScript控制播放/暂停嵌入YouTube视频

Question

我需要在网站上嵌入多个YouTube视频。对于每个视频，我需要设置一个可以触发YouTube视频播放的外部元素（例如段落，图像，div等），以及一个单独的元素，该元素将触发YouTube视频暂停。

我有一些JavaScript代码，可以用来播放/暂停一个嵌入式YouTube视频。但是，如果我尝试在同一页面上为一个以上的YouTube视频创建播放/暂停按钮，则只有最后一个YouTube视频的按钮才能使用。

为了证明这个问题，我创建了两个JS提琴。当页面上只有一个YouTube视频时，第一个小提琴显示了它的工作原理。

第二个小提琴显示了我尝试在同一页面上为多个YouTube视频创建按钮时会发生什么。如您所见，只有最后一次YouTube视频工作的按钮。

任何建议将不胜感激。我在下面包括了JS小提琴链接（和随附的代码）。谢谢你！

JS小提琴＃1（1视频）

https：//jsfiddle.net/ingenioussolutions/gtfprovc/14/ 视频）

“ https://jsfiddle.net/ingenioussolutions/4m95ogfd/2/”小提琴＃1

js小提琴的html代码＃1

<p>VIDEO #1</p>
<div class="fullwidth">
    <button id="play-button">PLAY</button>
    <button id="pause-button">PAUSE</button>
    <button id="stop-button">STOP</button>
</div>
<div class="fullwidth">
    <iframe id="video" src="https://www.youtube.com/embed/aIXOyOLkb24?enablejsapi=1&html5=1" frameborder="0"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

css for JS小提琴＃1：

.fullwidth {width: 100%;}

JS小提琴的Javascript代码＃1

// global variable for the player
var player;
// 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
      }
   });
}

function onPlayerReady(event) {
   var playButton = document.getElementById("play-button");
   playButton.addEventListener("click", function () {
      player.playVideo();
   });
   var pauseButton = document.getElementById("pause-button");
   pauseButton.addEventListener("click", function () {
      player.pauseVideo();
   });
   var stopButton = document.getElementById("stop-button");
   stopButton.addEventListener("click", function () {
      player.stopVideo();
   });
}

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

JS小提琴＃2的

<p>VIDEO #1</p>
<div class="fullwidth">
   <button id="play-button">PLAY</button>
   <button id="pause-button">PAUSE</button>
   <button id="stop-button">STOP</button>
</div>
<div class="fullwidth">
   <iframe id="video" src="https://www.youtube.com/embed/aIXOyOLkb24?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<p>VIDEO #2</p>
<div class="fullwidth">
   <button id="play-button2">PLAY</button>
   <button id="pause-button2">PAUSE</button>
   <button id="stop-button2">STOP</button>
</div>
<div class="fullwidth">
   <iframe id="video2" src="https://www.youtube.com/embed/4zTCd-k--7A?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

代码JS小提琴的代码2：

.fullwidth {width: 100%;}

JS小提琴2的JavaScript代码＃2

// global variable for the player
var player;
// 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
      }
   });
}

function onPlayerReady(event) {
   var playButton = document.getElementById("play-button");
   playButton.addEventListener("click", function () {
      player.playVideo();
   });
   var pauseButton = document.getElementById("pause-button");
   pauseButton.addEventListener("click", function () {
      player.pauseVideo();
   });
   var stopButton = document.getElementById("stop-button");
   stopButton.addEventListener("click", function () {
      player.stopVideo();
   });
}

// Javascript for second video

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

function onPlayerReady(event) {
   var playButton2 = document.getElementById("play-button2");
   playButton2.addEventListener("click", function () {
      player2.playVideo();
   });
   var pauseButton2 = document.getElementById("pause-button2");
   pauseButton2.addEventListener("click", function () {
      player2.pauseVideo();
   });
   var stopButton2 = document.getElementById("stop-button2");
   stopButton2.addEventListener("click", function () {
      player2.stopVideo();
   });
}

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