我想在播放 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