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

1、效果图

2、

<div><videocontrolsclass="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()
})