I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of <div> tags.
<div id="current">0:00</div>
<div id="duration">0:00</div>
I've been searching all day and I know how to get them I just can't display them. #jquerynoob
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: