YouTube iframe Player API：控制已经在 HTML 中的 MULTIPLE iframe 播放器

Question

我知道以前有人问过这个问题。但是，答案已过时，我还需要多个 iframe 播放器的其他信息。

我遵循Google Developers website 的代码。但是，当我尝试在onPlayerReady(event) function 内部调用event.target.playVideo(); 时，页面第一次加载时视频没有播放。

我也收到此错误消息GET https://i.ytimg.com/vi_webp/M7lc1UVf-VE/sddefault.webp?v=516f0b27 404

现在我正在展示 2 个视频和 Play video 1、Stop video 1、Play video 2 和 Stop video 2 工作的示例。当有很多视频时，我如何设置代码以便嵌入它们更紧凑？感谢您的帮助。

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

var player1;
var player2;

function onYouTubeIframeAPIReady() {
  	
  player1 = new YT.Player('existing-iframe-example1', {
    events: {
      'onReady': onPlayerReady1
    }
  });

  player2 = new YT.Player('existing-iframe-example2', {
    events: {
      'onReady': onPlayerReady2
    }
  });

}

function onPlayerReady1(event) {
  event.target.playVideo();

  $(function() {
	
    $('#play-btn1').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn1').on('click', function() {
      event.target.stopVideo();
    });

  });
}


function onPlayerReady2(event) {
  event.target.playVideo();
	
  $(function() {

    $('#play-btn2').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn2').on('click', function() {
      event.target.stopVideo();
    });

  });
}

.control { margin-bottom: 30px; }
.play-btn, .stop-btn { display: inline-block; margin: 10px 20px; color: blue; cursor: pointer; }
.play-btn:hover, .stop-btn:hover { color: orange; cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="existing-iframe-example1" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn1" class="play-btn">Play video 1</div>
  <div id="stop-btn1" class="stop-btn">Stop video 1</div>
</div>


<iframe id="existing-iframe-example2" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/5a2oZwB6zX0?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn2" class="play-btn">Play video 2</div>
  <div id="stop-btn2" class="stop-btn">Stop video 2</div>
</div>

Answer 1

基于此thread，这是预期的。 我们所做的实际上是尝试加载sddefault.jpg，如果失败，我们会退回到所有视频都应该存在的hqdefault.jpg。同样来自这个link，如果视频没有最大值分辨率图像，您将收到maxresdefault.jpg URL 的 404 错误。