The answers here do not allowing for seeking / scrubbing. You need this code or currentTime
will not update quickly when you seek / scrub, especially if you do so fast.
// Get the <video id="myVideo"> element
const video = document.getElementById('myVideo')
// updates currentTime when playing
video.ontimeupdate = evt => this.currentTime = evt.target.currentTime
// updates currentTime when seeking / scrubbing
video.onseeking = evt => this.currentTime = evt.target.currentTime
// updates currentTime when paused / video ends
video.onpause = evt => this.currentTime = evt.target.currentTime
And I recommend these as well:
// when resuming playback, fires quicker than ontimeupdate
video.onplay = evt => this.currentTime = evt.target.currentTime
// when resuming playback, fires quicker than ontimeupdate
video.onplaying = evt => this.currentTime = evt.target.currentTime
You may not need both of these last two but no harm in overdoing it.
Other events worth mentioning:
video.onseeked
seems to fire the same time as video.ontimeupdate
so no need to listen to it for the purposes of getting currentTime
. This was only tested on Chrome.
video.onended
seems to fire the same time as video.onpause
so no need to listen to it for the purposes of getting currentTime
. This was only tested on Chrome.
All available events are documented at https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
If you use all the events recommended in this post, you should find that currentTime
updates quickly. However, you may wish to have multiple event listeners listening to the same event, allowing you to add or remove them at will. If so I recommend this approach:
https://stackoverflow.com/a/69273090/1205871
currentTime
andduration
values intimeupdate
event ofVideo
tag.