如何为网站Vimeo视频实现25%/50%/75%播放进度跟踪？

你已经搞定了播放和完成事件的跟踪，接下来要实现进度节点的跟踪其实很简单，核心是利用Vimeo Player的timeupdate事件实时监听播放进度，同时做好重复触发的防重处理。我给你整理了完整的实现代码和关键说明：

$(document).ready(function() { 
  var iframe = document.querySelector('#vimeo_id_0'); 
  var player = new Vimeo.Player(iframe); 
  // 存储已触发的进度节点，避免重复上报（比如用户拖动进度条来回跨节点）
  var trackedPercentages = [];
  // 我们要跟踪的目标进度节点
  var targetPercentages = [25, 50, 75];

  // 播放事件跟踪（保留你原有的逻辑）
  player.on('play', function(data){ 
    // 重新播放时重置已跟踪节点，确保新播放周期能再次触发进度跟踪
    trackedPercentages = [];
    player.getVideoTitle().then(function(title) { 
      $('body').append('<div>Play:' + title + '</div>'); 
      // 这里可以补充你的GA上报逻辑
      // ga('send', 'event', 'Videos', 'Play', title);
    }); 
  });

  // 播放完成事件跟踪（补充你原有的逻辑）
  player.on('ended', function(data){
    player.getVideoTitle().then(function(title) { 
      $('body').append('<div>Finished:' + title + '</div>'); 
      // ga('send', 'event', 'Videos', 'Finished', title);
    });
  });

  // 实时监听播放进度，实现节点跟踪
  player.on('timeupdate', function(data) {
    // 获取当前播放时间和视频总时长
    var currentTime = data.seconds;
    var duration = data.duration;
    
    // 避免初始加载时duration为0的无效计算
    if (duration && duration > 0) {
      var progressPercentage = Math.floor((currentTime / duration) * 100);
      
      // 遍历目标节点，检查是否达到且未被跟踪
      targetPercentages.forEach(function(percent) {
        if (progressPercentage >= percent && !trackedPercentages.includes(percent)) {
          player.getVideoTitle().then(function(title) {
            $('body').append('<div>' + percent + '% Watched:' + title + '</div>');
            // 替换成你的实际上报逻辑
            // ga('send', 'event', 'Videos', `${percent}% Watched`, title);
          });
          // 将该节点标记为已跟踪，防止重复触发
          trackedPercentages.push(percent);
        }
      });
    }
  });
});

关键逻辑说明 #

• 防重处理：trackedPercentages数组用来记录已经触发过的进度节点，避免用户拖动进度条、暂停后继续播放时重复上报同一个节点。
• 进度监听：timeupdate事件会在播放进度变化时频繁触发（默认每秒几次），我们在这里计算当前播放进度占总时长的百分比。
• 节点判断：只有当进度达到目标百分比，且该节点还未被跟踪过的时候，才执行跟踪逻辑，同时把节点加入已跟踪数组。
• 重置机制：在play事件里重置trackedPercentages，确保用户重新播放视频时，进度节点能再次被触发。

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