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()
})