Embeded嵌入视频指定时间自动暂停及播放恢复方案咨询

现有YouTube功能问题修复 #

你遇到的暂停后无法手动触发播放的问题，核心原因是timeupdate事件触发频率高（每秒4~6次），未加触发限制的情况下会反复执行暂停逻辑，覆盖用户的播放操作，修复逻辑如下：

• 新增单次触发锁标记，仅首次满足时间条件时执行暂停，后续不再重复触发
• 可选：如果需要支持用户拖回进度后再次触发暂停，可以在用户触发播放时判断当前进度，动态重置锁标记

修复后代码示例 #

// 基于YouTube Iframe API实现
const youtubePlayer = new YT.Player('youtube-player', {
  height: '360',
  width: '640',
  videoId: '替换为你的YouTube视频ID',
  events: {
    'onReady': onYoutubePlayerReady
  }
});

// 配置项：目标暂停时间，单位为秒
const YOUTUBE_TARGET_PAUSE = 60;
// 触发锁：默认未触发过暂停
let youtubePauseTriggered = false;

function onYoutubePlayerReady(event) {
  event.target.playVideo();
  // 定时检测播放进度
  const progressCheck = setInterval(() => {
    const current = youtubePlayer.getCurrentTime();
    if (!youtubePauseTriggered && current >= YOUTUBE_TARGET_PAUSE) {
      youtubePlayer.pauseVideo();
      youtubePauseTriggered = true;
      // 若不需要重复触发可在此处清理定时器
      // clearInterval(progressCheck);
    }
  }, 100);
}

// 可选：用户点击播放时，若进度已回退到目标时间前，重置触发锁
youtubePlayer.addEventListener('onStateChange', (e) => {
  if (e.data === YT.PlayerState.PLAYING && youtubePauseTriggered) {
    const current = youtubePlayer.getCurrentTime();
    if (current < YOUTUBE_TARGET_PAUSE) {
      youtubePauseTriggered = false;
    }
  }
});

Vimeo平台功能实现 #

使用Vimeo官方Player SDK实现相同逻辑，代码示例如下：

// 基于Vimeo Player SDK实现
const vimeoPlayer = new Vimeo.Player('vimeo-player', {
  id: '替换为你的Vimeo视频ID',
  width: 640
});

// 配置项：目标暂停时间，单位为秒
const VIMEO_TARGET_PAUSE = 60;
// 触发锁
let vimeoPauseTriggered = false;

// 监听Vimeo原生timeupdate事件
vimeoPlayer.on('timeupdate', (data) => {
  if (!vimeoPauseTriggered && data.seconds >= VIMEO_TARGET_PAUSE) {
    vimeoPlayer.pause();
    vimeoPauseTriggered = true;
  }
});

// 可选：播放时重置触发锁逻辑
vimeoPlayer.on('play', async () => {
  const current = await vimeoPlayer.getCurrentTime();
  if (current < VIMEO_TARGET_PAUSE) {
    vimeoPauseTriggered = false;
  }
});

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