Question about video metadata and functions

I’m trying to get a progress bar to update as a video plays and having problems.

I’m getting a video from an array of different videos and putting it into my video element. The first function works fine but the second one throws an error saying progressBar.value can’t be assigned because the value it’s trying to give to assign it is NaN.

video.onloadedmetadata = function () { progressBar.value = video.currenttime / video.duration }

video.ontimeupdate = function () { progressBar.value = video.currenttime / video.duration }

I’m assuming the second one doesn’t have access to the Metadata it needs to calculate the value but I’m unsure how to fix it.

Is there something I can add to my function so it doesn’t run until it gets the Metadata? I tried figuring out a loop that’d run nothing until video.duration != NaN but can’t seem to sort out how I’d do it.

Any help would be greatly appreciated

I ended up working around the issue by just setting the max value for progressBar to video.duration and set the value of progressBar to video.currenttime.

I’d still like to know if there is a way to make sure my second function doesn’t run until it has the needed metadata though