设置指定起始时间的嵌入视频刷新后无法从该时间点重启

直接用iframe的start和end参数，刷新后失效是因为YouTube会优先读取浏览器缓存的会话状态，而非URL参数。要解决这个问题，需要结合YouTube Player API强制控制播放范围，同时用本地存储确保刷新后参数不丢失。

具体实现步骤 #

• 移除iframe中多余的&（你的URL末尾多了这个无效参数）
• 引入YouTube Player API脚本
• 用JavaScript初始化播放器，读取本地存储的起止时间（或设置默认值），在播放器就绪后强制跳转到起始时间，同时监听播放进度，到达结束时间时暂停

完整代码示例 #

<!-- 替换原来的iframe，由JS初始化播放器容器 -->
<div id="youtube-player"></div>

<script>
// 定义默认起止时间，也可根据需求从URL参数读取
const defaultStartTime = 10;
const defaultEndTime = 15;

// 从localStorage读取参数，无值则用默认值
let startTime = localStorage.getItem('youtubeStartTime') || defaultStartTime;
let endTime = localStorage.getItem('youtubeEndTime') || defaultEndTime;

// 保存参数到localStorage，确保刷新后不丢失
localStorage.setItem('youtubeStartTime', startTime);
localStorage.setItem('youtubeEndTime', endTime);

// 加载YouTube Player API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-player', {
    height: '315',
    width: '560',
    videoId: 'DAOZJPquY_w',
    playerVars: {
      'start': startTime,
      'end': endTime,
      'autoplay': 1 // 可选，开启自动播放
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  // 播放器就绪后，强制跳转到起始时间，规避缓存影响
  event.target.seekTo(startTime, true);
}

function onPlayerStateChange(event) {
  // 监听播放进度，到达结束时间时暂停
  if (event.data == YT.PlayerState.PLAYING) {
    setInterval(() => {
      const currentTime = player.getCurrentTime();
      if (currentTime >= endTime) {
        player.pauseVideo();
      }
    }, 100);
  }
}
</script>

关键说明 #

• localStorage用于持久化存储起止时间，页面刷新后参数不会重置
• 通过API的seekTo方法强制跳转起始时间，避免浏览器缓存的会话状态干扰
• 实时监听播放进度，确保视频到达结束时间后立即暂停，严格遵循设定范围

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