(一)用到的知识点
(1)ontimeupdate 事件在视频、音频当前位置发生改变时触发
(2)onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频或音频的下一帧时触发
注意:对于记录视频当前位置,因为ontimeupdate触发频次太高了,可以对其采用节流一秒触发一次,因为可以实现关闭页面下次打开从上次结束的位置开始播放视频,则应将当前时间存在本地存储里面
主要实现功能部分的代码
const video=document.querySelector('video')
// ontimeupdate时间每次进行改变就会触发,过快,可采用节流一段时间(1s)内只触发一次
video.οntimeupdate=_.throttle(()=>{
// 记录当前视频播放时间,存到本地存储里面,这样下次打开页面还会有,每隔一秒存储一次
localStorage.setItem('currentTime',video.currentTime)
},1000)
//打开页面触发时间,从本地存储里面取出记录的时间,赋值给video.currentTime
video.οnlοadeddata=(()=>{
video.currentTime=localStorage.getItem('currentTime')||0
})