How to prevent multiple video playback on the same page at the same time?

Question

HTML

Good day!
There are multiple videos on the same page that are added via the html5 video tag. How to disable simultaneous playback?
It's probably more correct to do this: When the user clicks on the playback of another video, the first one stops.

Answer 1

There is a click event on the play button, you stop all the videos on it and start the one you need.

Answer 2

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

$("iframe").each(function(indx){
 var min = $(this)[0].src.indexOf('?');
 var src = $(this)[0].src.substr(0, min) + '?enablejsapi=1';
 $(this)[0].src = src;
 $(this)[0].id = 'player' + indx;
});

function onPlayerStateChange(event) {
 var flag = 0;
 $(players).each(function(){
  if(this.getPlayerState() == 1){
   flag += 1;
  }
 });
 if(event.data == 1 && flag > 1){
  stop_all();
  event.target.playVideo();
 }
}

function stop_all (){
 $(players).each(function(){
  this.pauseVideo();
 });
}

var players = [];
function onYouTubeIframeAPIReady() {
$("iframe").each(function(indx){
 var temp = new YT.Player('player' + indx, {
  events: {
   'onStateChange': onPlayerStateChange
  }
 });
 players.push(temp);
});
}

don't forget to include jQuery