Как запретить одновременное нескольких воспроизведение видео на одной странице?

Question

[evve]

Доброго времени суток!
На одной странице есть несколько видео, которые добавлены через тег video html5. Как запретить одновременное воспроизведение?
Правильнее наверное сделать так: Когда пользователь нажимает на воспроизведение другого ролика, первый останавливается.

Comments

[Дмитрий Королев]

я на юнити так сделал. когда я воспроизвожу видео, я создаю у этого объекта особый флаг. а когда включаю другое, то ищу флаг, если он есть, то я через него останавливаю воспроизведение, и убираю флаг на предыдущем видео. дальше создаю флаг на текущем

[Дмитрий Королев]

Вы там в HTML5 смотрите что вы можете переназвать или чем пометить чтобы создать флаг. при этом вы должны мочь найти этот флаг и обратиться через него чтоб остановить предыдущее воспроизведение

Answer 1

[Максим Тимофеев]

Есть событие клика по кнопке плей, по нему останавливаете все видео и запускаете нужный.

Answer 2

[antonmoshkin]

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

не забудьте подключить jQuery