如何利用localStorage在页面重载时恢复Vimeo视频暂停时间？

Got it! Let's build out that functionality so users can pick up right where they left off when they come back to your page. Here's how to expand your existing jQuery code with localStorage:

完整实现代码 #

jQuery(document).ready(function() {
  // 首先初始化Vimeo播放器（把'your-video-id'替换成你页面中Vimeo iframe的实际ID）
  const player = new Vimeo.Player('your-video-id');

  // 监听暂停事件，存储当前播放时间
  player.on('pause', function() {
    // 获取当前播放的秒数
    player.getCurrentTime().then(function(currentTime) {
      // 将时间存入localStorage，用自定义键名标识
      localStorage.setItem('vimeo-resume-position', currentTime);
      console.log(`已存储暂停位置：${currentTime}秒`);
    }).catch(function(error) {
      console.error('获取当前播放时间失败:', error);
    });
  });

  // 页面加载时，检查是否有存储的位置并跳转过去
  const savedPosition = localStorage.getItem('vimeo-resume-position');
  if (savedPosition) {
    // 把存储的字符串转为数字，设置播放位置
    player.setCurrentTime(parseFloat(savedPosition)).then(function(actualTime) {
      console.log(`已恢复到上次暂停位置：${actualTime}秒`);
    }).catch(function(error) {
      // 如果存储的时间超出视频总时长，清除无效数据
      localStorage.removeItem('vimeo-resume-position');
      console.error('恢复播放位置失败:', error);
    });
  }
});

关键注意事项 #

• 引入Vimeo Player SDK：你需要在页面中加入Vimeo官方的播放器脚本，才能使用getCurrentTime()和setCurrentTime()这些API。可以把这段代码加到<head>里或者你的jQuery脚本之前：

  <script src="https://player.vimeo.com/api/player.js"></script>
  

• 匹配视频元素ID：确保'your-video-id'和你页面中Vimeo iframe的id属性一致（比如你的iframe是<iframe id="my-vimeo-video" src="...">，就用'my-vimeo-video'）。
• 可选：重置存储位置：如果想给用户提供重新开始观看的选项（比如一个“重新播放”按钮），可以给按钮加点击事件，执行localStorage.removeItem('vimeo-resume-position')来清除存储的时间。

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