Я хочу остановить другие видео во время воспроизведения YouTube

Question

Я управляю несколькими YouTube с помощью следующего кода.

Как остановить другие видео при воспроизведении текущего?

Sample

HTML

<div id="youtube_p_c6uQHlhZ0" class="videos_youtube">
    <img src="http://i.ytimg.com/vi/p_c6uQHlhZ0/mqdefault.jpg">
</div>

<div id="youtube_4TF2unP74tc" class="videos_youtube">
    <img src="http://i.ytimg.com/vi/4TF2unP74tc/mqdefault.jpg">
</div>

<button id="play">play</button>
<button id="pause">pause</button>

JavaScript

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

// Embed YouTube after clicking
$('body').on("click",".videos_youtube",function(){

  var click_Id = $(this).attr('id');
  var target_Id = document.getElementById(click_Id);
  var click_VideoId = $(this).attr('id').replace('youtube_','');

  target_Id.addEventListener('click', function() {
    var ytArea = target_Id;
    var ytID = click_VideoId;
    ytPlayer = new YT.Player(ytArea, {
      width: 640,
      height: 390,
      videoId: ytID
    });
  }, false);

  // Control
  $('#play').click(function() {
    ytPlayer.playVideo();
  });
  $('#pause').click(function() {
    ytPlayer.pauseVideo();
  });

})(jQuery);

Answer 1

Добавьте каждый новый видеопроигрыватель в массив и итерируйте их при необходимости.

Если действительно нужно следующее, кнопка воспроизведения останавливает другие видео.

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

// Embed YouTube after clicking
$('body').on("click",".videos_youtube",function(){

  var click_Id = $(this).attr('id');
  var target_Id = document.getElementById(click_Id);
  var click_VideoId = $(this).attr('id').replace('youtube_','');
  
  target_Id.addEventListener('click', function() {
    var ytArea = target_Id;
    var ytID = click_VideoId;
    ytPlayer = new YT.Player(ytArea, {
      width: 640,
      height: 390,
      videoId: ytID
    });
    ytPlayers.push(ytPlayer);
  }, false);

	// Control
  $('#play').click(function() {
  	for (var ytIndex in ytPlayers) {
    	ytPlayers[ytIndex].pauseVideo();
    }
    
    ytPlayer.playVideo();
  });
  $('#pause').click(function() {
    ytPlayer.pauseVideo();
  });

})(jQuery);

Sample

или это, если при каждом изменении состояния на PLAYING :

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

// Embed YouTube after clicking
$('body').on("click", ".videos_youtube", function() {

  var click_Id = $(this).attr('id');
  var target_Id = document.getElementById(click_Id);
  var click_VideoId = $(this).attr('id').replace('youtube_', '');

  target_Id.addEventListener('click', function() {
    var ytArea = target_Id;
    var ytID = click_VideoId;
    ytPlayer = new YT.Player(ytArea, {
      width: 640,
      height: 390,
      videoId: ytID,
      events: {
        'onStateChange': function(event) {
          if (event.target.getPlayerState() == YT.PlayerState.PLAYING) {
            // Pause others
            for (var ytIndex in ytPlayers) {
              if (ytPlayers[ytIndex] != event.target) {
                ytPlayers[ytIndex].pauseVideo();
              }
            }
          }
        }
      }
    });

    ytPlayers.push(ytPlayer);
  }, false);

  // Control
  $('#play').click(function() {
    ytPlayer.playVideo();
  });
  $('#pause').click(function() {
    ytPlayer.pauseVideo();
  });

})(jQuery);

Sample