如何优化Vimeo IFRAME时间戳链接，避免点击时重载视频？

核心思路 #

利用Vimeo官方Player API直接控制iframe内的视频播放进度，彻底解决原方案中点击链接重载视频的问题，实现流畅的时间戳跳转，无需依赖任何WordPress插件。

完整实现代码 #

替换你原有的代码为以下内容即可：

<h4>VIMEO TIMESTAMP LINKS</h4>

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe id="vidframe" name="vidframe" src="https://player.vimeo.com/video/605069004?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="POOL VIDEO">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

<strong>TIME STAMPS</strong>
<ul>
<li><a href="#" data-seconds="0">0 min 0 sec</a></li>
<li><a href="#" data-seconds="30">0 min 30 sec</a></li>
<li><a href="#" data-seconds="62">1 min 2 sec</a></li>
<li><a href="#" data-seconds="123">2 min 3 sec</a></li>
<li><a href="#" data-seconds="167">2 min 47 sec</a></li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const player = new Vimeo.Player('vidframe');
  const timestampLinks = document.querySelectorAll('ul li a[data-seconds]');
  
  timestampLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetTime = parseInt(this.dataset.seconds);
      
      player.setCurrentTime(targetTime)
        .then(() => player.play())
        .catch(err => console.error('跳转失败:', err));
    });
  });
});
</script>

关键改动说明 #

1. iframe添加id：给iframe加上id="vidframe"，让Player API能精准定位播放器实例
2. 时间戳链接改造：移除原有的重载式href，改用data-seconds存储目标时间的总秒数（比如1分2秒转成62秒），避免解析字符串的麻烦
3. 原生JS绑定事件：
   • 初始化Vimeo播放器实例
   • 给所有时间戳链接绑定点击事件，阻止默认跳转行为
   • 调用setCurrentTime()直接跳转至指定时间，完成后自动调用play()开始播放

这个方案完全符合需求：无需插件、不用jQuery、点击链接不重载视频、跳转流畅快速，和YouTube的API方案逻辑一致。

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