前端视频播放禁止快进

这个需求也是前端很常见的需求了，废话不多说，直接看代码，下面用vue3代码去演示

<templete>
  <div class="dialog-video">
  <video ref="videoPlayer" @timeupdate="timeupdate" autoplay controls muted object-fit="fill"
    x5-video-player-type="h5-page" x5-video-orientation="landscape|portrait" webkit-playsinline="true"
    playsinline="true">
    <source :src="current.videoUrl" type="video/mp4" />
  </video>
</div>
</templete>

<script setup>
  let lastCureentTime = 0;
//视频播放进度
const timeupdate = (e) => {
    let totalTimeSeconds = Math.round(e.target.duration);
    let currentTimeSeconds = Math.round(e.target.currentTime);
    // console.log("视频总时长（秒）：", totalTimeSeconds)
    // console.log("视频播放进度（秒）：", currentTimeSeconds);

    // console.log("lastCureentTime", lastCureentTime)
    const video = videoPlayer.value;

    //禁止用户快进代码
    if (currentTimeSeconds - lastCureentTime > 2) {
        console.log("用户快进")
        video.currentTime = lastCureentTime
    } else {
        lastCureentTime = currentTimeSeconds
        if (totalTimeSeconds == currentTimeSeconds) {
            //这里执行 视频自动播放完成后的逻辑 根据自己业务而定
            handleVideoEnded();
        }
    }
}
</script>

主要就是根据@timeupdate 这个视频监听的回调方法拿到播放进度的秒数 还有总时长

检测到用户拖动进度后 强制给他拉回上次拖动进度条前保存的进度