(1) Knowledge points used
(1) The ontimeupdate event is triggered when the current position of the video and audio changes
(2) The onloadeddata event is triggered when the data of the current frame is loaded and there is not enough data to play the next frame of video or audio
Note: For recording the current position of the video, because the trigger frequency of ontimeupdate is too high, it can be throttled to trigger once a second, because it can be closed and the next time the page is opened to start playing the video from the last position, the current time should be set stored in local storage
The code that mainly implements the functional part
const video=document.querySelector('video')
// The ontimeupdate time will be triggered every time it is changed, if it is too fast, it can be throttled for a period of time (1s) and only triggered once
video.οntimeupdate=_.throttle(()=>{
// Record the current video playback time and save it in the local storage, so that the next time you open the page, there will be one, and it will be stored every second
localStorage.setItem('currentTime',video.currentTime)
},1000)
//Open the trigger time of the page, retrieve the recorded time from the local storage, and assign it to video.currentTime
video.οnlοadeddata=(()=>{
video.currentTime=localStorage.getItem('currentTime')||0
})
