vue3+vant实现视频播放（含首次禁止进度条拖拽，视频看完后恢复，保存播放视频进度，刷新及下次进入继续播放，判断视频有无全部看完等）

1、效果图

2、

<div>
  <video
    controls
    class="video_player"
    ref="videoPlayer"
    :src="videoSrc"
    @timeupdate="handleTimeUpdate"
    @play="onPlay"
    @pause="onPause"
    @ended="onVideoEnded"
  ></video>

    <!--添加遮罩层视频第一次观看不支持快进，已观看过的内容重复观看支持快进。-->
    <div v-if="videoPlayEnd == false" class="cover"></div>
</div>

<div class="right_box" v-if="videoPlayEnd == true">
   <img class="img_style" src="@/assets/image/已看完.png" />
   <div class="text_right">已看完</div>
</div>
<div class="right_box" v-if="videoPlayEnd == false">
   <img class="img_style" src="@/assets/image/未看完.png" />
   <div class="text2_right">未看完</div>
</div>


const videoPlayEnd = ref(false) //视频播放结束标识
const lastTime = ref(0) //视频上次播放的时间
//视频播放
const onPlay = () => {
  console.log('视频播放')
}
//视频暂停
const onPause = () => {
  console.log('视频暂停')
}
//播放结束
const onVideoEnded = () => {
  console.log('播放结束')
  videoPlayEnd.value = true
}
const handleTimeUpdate = () => {
  if (videoPlayer.value) {
    const currentTime = videoPlayer.value.currentTime //当前播放的时间
    lastTime.value = currentTime //保存当前播放时间
    localStorage.setItem('videoTime', lastTime.value)
  }
}

onMounted(() => {
  //实现保存视频进度，下次进来继续播放
  const savedTime = localStorage.getItem('videoTime')
  if (savedTime) {
    //检查是否存在保存的时间
    videoPlayer.value.currentTime = parseFloat(savedTime) //转化成浮点数
  }
  handleTimeUpdate()
})