鼠标悬停播放视频，鼠标移出反向播放视频功能异常求助

嘿，我来帮你搞定这个视频交互的小bug～你的功能思路没问题，但几个细节没处理到位导致了异常，咱们一步步理清楚：

问题根源分析 #

1. 未清理倒放定时器：当你在悬停初期快速移出再悬停时，之前启动的倒放setInterval还在后台偷偷运行，持续修改currentTime，和新的play()操作打架，导致视频没法正常播放。
2. currentTime精度陷阱：视频的currentTime是浮点数，直接用== 0判断倒放结束几乎永远不会触发，定时器会一直挂着占资源，还干扰后续的播放操作。
3. 播放状态未同步：play()是异步操作，而且没重置播放速率，有时候会因为状态冲突导致播放失败。

修复后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" muted>
  <source src="https://i.imgur.com/SWdBzDO.mp4" type="video/mp4">
</video>

CSS #

video{
  height: 400px;
}

JavaScript #

var video = document.getElementById('video');
var intervalRewind;

$("#video").on("mouseover", function(event) {
  // 先干掉后台的倒放定时器，避免冲突
  if (intervalRewind) {
    clearInterval(intervalRewind);
    intervalRewind = null;
  }
  // 重置播放速率为正常速度
  video.playbackRate = 1.0;
  // 调用play()并处理异步状态，捕获可能的播放失败
  video.play().catch(err => {
    console.log("播放触发失败:", err);
  });
}).on('mouseout', function(event) {
  // 先清除旧定时器，防止重复创建
  if (intervalRewind) {
    clearInterval(intervalRewind);
  }
  intervalRewind = setInterval(function(){
    video.playbackRate = 1.0;
    // 用范围判断代替精确等于0，解决浮点数精度问题
    if(video.currentTime <= 0.1){
      clearInterval(intervalRewind);
      intervalRewind = null;
      video.pause();
      // 强制把视频拉回起始位置
      video.currentTime = 0;
    } else{
      video.currentTime -= 0.1;
    }
  },25);
});

关键修复点说明 #

• 定时器全生命周期管理：每次触发mouseover和mouseout时，都先检查并清除已有定时器，彻底避免多个定时器同时运行的冲突。
• 精度问题修正：用currentTime <= 0.1判断倒放结束，确保定时器能被正常关闭，不会一直占用资源。
• 状态同步处理：mouseover时强制重置播放速率，保证播放是正常速度；同时处理play()的Promise，能捕获并排查播放失败的情况。

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