如何在视频特定时间展示Snackbar？JS代码调试求助

AI 小北

2026-5-15

解决视频特定时间触发Snackbar的问题

嘿，我来帮你排查下代码没生效的原因，主要有几个关键问题，咱们一步步修正：

问题1：用了赋值操作而非比较操作

你代码里的if(vidTime = 11.725395)是赋值语句（把11.725395赋值给vidTime），不是判断相等的逻辑。应该用严格相等运算符===，而且考虑到视频播放时currentTime的浮点数精度问题，直接判断绝对相等很容易错过，建议用范围判断：

// 比如判断当前时间在11.7到11.8秒之间
if(vidTime >= 11.7 && vidTime <= 11.8)

问题2：代码只执行了一次，没有实时监听时间变化

你现在的代码在页面加载时就执行了if判断，这时候视频还没开始播放，currentTime是0，自然不会触发Snackbar。需要给视频绑定timeupdate事件，每次视频时间更新时都检查当前时间：

问题3：（可选）避免重复触发Snackbar

如果不做限制，视频时间在目标区间内的每一次timeupdate都会触发Snackbar，可能导致多次弹出。可以加个变量标记是否已经显示过。

修正后的完整代码

// 获取视频元素
var vid = document.getElementById("myVideo");
// 标记是否已经显示过Snackbar
var hasShownSnackbar = false;

// 监听视频时间更新事件
vid.addEventListener('timeupdate', function() {
  var vidTime = vid.currentTime;
  // 判断时间范围，且未显示过Snackbar
  if(vidTime >= 11.7 && vidTime <= 11.8 && !hasShownSnackbar) {
    var x = document.getElementById("snackbar");
    x.className = "show";
    // 标记已显示，避免重复触发
    hasShownSnackbar = true;
    // 3秒后隐藏
    setTimeout(function(){
      x.className = x.className.replace("show", "");
    }, 3000);
  }
});

// 可选：测试用的获取当前时间函数
function getCurTime() {
  alert(vid.currentTime);
}