iframe 上 loop=1 的行为不一致答案

【问题标题】：Inconsistent behavior with loop=1 on iframeiframe 上 loop=1 的行为不一致
【发布时间】：2019-01-24 15:41:54
【问题描述】：

我在尝试使用基本 iframe 让视频持续循环播放时遇到了非常令人沮丧的经历。我没有通过代码与 API 交互。我只是有一个带有autoplay=1,mute=1,loop=1 的 iframe。我试过使用独立视频，也试过播放列表（list=[ID],listType=playlist），但我一直遇到同样的问题。有时播放器会循环播放视频，有时则不会。每次我认为我已经弄清楚并准备好部署应用程序时，我都会再次对其进行测试，但视频无法循环播放。

Windows 10

Chrome 71.0.3578.98

Angular 6.0.3

【问题讨论】：

标签： youtube-api

【解决方案1】：

您可以选择以下任何选项：

Check my answer 我在其中描述了如何设置 URL 以创建播放列表（使用单个 videoId） 并模拟循环。
使用 YouTube iframe Player API 设置您的视频，（一旦视频结束），调用 playVideo() 函数播放当前视频 = 因此，创建一个循环。

这是代码： - 不幸的是，你看不到它在这里工作，但是，你可以看到working jsfiddle¹

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

// Variables of the divs (where the YouTube iframe will load):
var player;

function onYouTubeIframeAPIReady() {

  // Div player:
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'xPCZEoGJi_4',
    playerVars: {
      'autoplay': 1,
      'loop': 1,
      'mute': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

}

// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {

  // When the video ends, it will play again.
  // See: https://developers.google.com/youtube/iframe_api_reference?hl=en#Events
  if (event.data == YT.PlayerState.ENDED) {
    player.playVideo();
  }
}

// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="player"></div>

¹ 如果视频（一旦加载） 没有播放，您必须手动播放视频 - 这是由于 jsfiddle 的某种限制。

【讨论】：