如何基于视频时长显示提交按钮，并在视频暂停时停止计时器？

要实现根据视频时长动态计时、暂停时停止计时、禁止快进后直接显示按钮的需求，可按以下步骤修改代码：

1. 调整HTML按钮（初始隐藏） #

首先给提交按钮添加初始隐藏样式，确保只有完成观看后才显示：

<div class="embed-responsive embed-responsive-16by9">
  <video controls id="myVideo" class="embed-responsive-item" src="/assets/MSFS.mp4" allowfullscreen></video>
</div>

<button id="proceed" type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" style="display:none;">Submit</button>

2. 核心JavaScript逻辑 #

替换原有固定setTimeout的代码，实现动态计时、暂停/继续、快进检测：

$(document).ready(function() {
  const video = document.getElementById('myVideo');
  const proceedBtn = $('#proceed');
  let watchTimer;       // 计时定时器
  let watchedTime = 0;  // 用户累计观看时长（秒）
  let videoDuration = 0;// 视频总时长（秒）

  // 视频元数据加载完成后获取准确时长
  video.addEventListener('loadedmetadata', function() {
    videoDuration = video.duration;
  });

  // 视频播放时启动计时
  video.addEventListener('play', function() {
    // 每秒更新一次累计观看时长
    watchTimer = setInterval(function() {
      // 检测快进：如果当前播放进度远大于累计观看时长，说明用户快进了，同步时长（防止跳过内容）
      if (video.currentTime - watchedTime > 1) {
        watchedTime = video.currentTime;
      }
      
      watchedTime += 1;
      
      // 累计观看时长达到视频总时长，显示按钮并停止计时
      if (watchedTime >= videoDuration) {
        proceedBtn.show();
        clearInterval(watchTimer);
      }
    }, 1000);
  });

  // 视频暂停时停止计时
  video.addEventListener('pause', function() {
    clearInterval(watchTimer);
  });

  // 视频自然播放结束时直接显示按钮
  video.addEventListener('ended', function() {
    proceedBtn.show();
    clearInterval(watchTimer);
  });
});

关键逻辑说明 #

• 获取视频时长：通过loadedmetadata事件监听视频元数据加载完成，此时才能拿到准确的video.duration（避免初始值为NaN）。
• 暂停/继续计时：监听play事件启动定时器，pause事件清除定时器，确保暂停时不会累计时长。
• 快进检测：对比当前播放进度和累计观看时长，若差值超过1秒（可自定义阈值），判定为快进，同步累计时长到当前进度，防止用户跳过内容直接触发按钮显示。
• 播放结束兜底：监听ended事件，确保视频自然播放完成后直接显示按钮。

注意事项 #

• 前端检测仅作基础验证，若需严格限制（防止用户篡改前端代码），建议配合后端：定时上报观看进度，后端校验后再允许提交。
• 快进检测的阈值（1秒）可根据需求调整，比如设为0.5秒会更严格。

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