嵌入 YouTube 视频，其中链接指向播放列表，但其他视频不会自动播放？

Question

我正在我的网站上嵌入 YouTube 视频。

该视频是播放列表的一部分，当用户单击在 youtube.com 上打开视频时，我需要将其显示为播放列表的一部分。

我已经通过以下方式完成了此操作：

<iframe src={`https://www.youtube.com/embed/${video.id}${playlistId}`} />

但是，当用户观看嵌入视频时，我不希望播放列表中的下一个视频最后自动播放。在我的网页上，所有视频都嵌入在标题下，因此如果视频发生变化，标题就会错误。

我尝试了这个

https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1

但没有成功。

https://developers.google.com/youtube/player_parameters

Answer 1

您需要使用少量 URL 参数来控制此行为。

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=0&rel=0&autoplay=0"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

实际上，这些参数可以帮助您控制嵌入的视频，当其结束时，它只是停止，而不是转到播放列表中的下一个视频。

此外，您可以使用JavaScript通过onStateChange事件进行更多控制，并通过调用player.stopVideo()来停止视频

<div id="player"></div>

<script>
  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 player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '315',
      width: '560',
      videoId: 'VIDEO_ID',
      playerVars: {
        playlist: 'PLAYLIST_ID',
        autoplay: 0,
        loop: 0,
        rel: 0
      },
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
      // Stop the video instead of moving to the next one.
      player.stopVideo();
    }
  }
</script>

通过这种方式，您可以让用户专注于您的嵌入内容。