嵌入YouTube循环iframe视频首次加载异常问题求助

方案1：用YouTube IFrame API手动控制循环 #

放弃依赖playlist参数，通过API监听视频结束事件实现循环，彻底避免参数冲突导致的加载错误，同时精准控制播放起点：

<!-- HTML部分 -->
<div id="player"></div>

<script>
// 加载YouTube IFrame 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 player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'MegurLP8PxI',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'rel': 0,
      'start': 312
    },
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

// 监听视频状态变化，结束时回到指定起点重新播放
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    player.seekTo(312);
    player.playVideo();
  }
}
</script>

方案2：优化嵌入参数，移除冗余项 #

保留loop和playlist参数，但移除可能干扰加载的widgetid，同时调整参数顺序（将playlist放在loop之前），减少加载时的参数解析冲突：

<iframe 
  src="https://www.youtube.com/embed/MegurLP8PxI?autoplay=1&controls=0&rel=0&enablejsapi=1&start=312&playlist=MegurLP8PxI&loop=1"
  width="640" 
  height="360" 
  frameborder="0" 
  allow="autoplay; encrypted-media" 
  allowfullscreen
></iframe>

方案3：添加加载失败重试机制 #

针对偶尔出现的加载错误，给iframe绑定错误监听，自动重试加载，无需用户手动刷新：

<iframe 
  id="youtube-player"
  src="https://www.youtube.com/embed/MegurLP8PxI?autoplay=1&controls=0&rel=0&enablejsapi=1&start=312&playlist=MegurLP8PxI&loop=1"
  width="640" 
  height="360" 
  frameborder="0" 
  allow="autoplay; encrypted-media" 
  allowfullscreen
></iframe>

<script>
const player = document.getElementById('youtube-player');
let retryCount = 0;
const maxRetries = 2;

player.addEventListener('error', () => {
  if (retryCount < maxRetries) {
    // 添加随机参数避免缓存，重新加载
    player.src = player.src + '&t=' + Date.now();
    retryCount++;
  }
});
</script>

内容的提问来源于stack exchange，提问作者AgonIsGone