In my efforts to develop a personalized HTML5 video player that can handle live streaming, recording of live streams, and playing regular video files, I have run into an issue with creating a custom seeking bar. To achieve this, I implemented the following code snippet:
var seekerPosition = (video.currentTime * 1000) / (video.duration * 1000);
var seekerValue = seekerPosition * 100 + "%";
When testing it out, I noticed that my seeker bar only starts moving after some time the video has begun playing. Upon investigation prompted by this question, I discovered that the video duration is only accessible once the video's readyState has changed. However, even when the readyState reaches 4, the duration still displays as Infinity. Here's the relevant part of my code:
<video id="video" class="video" muted></video>
Below are excerpts from the console log displaying the result during playback of a 7-second video, generated by the startTracking function:
currentTime = 0.221292 , duration = Infinity , readyState is 4
currentTime = 0.238313 , duration = Infinity , readyState is 4
... (and many more instances)
currentTime = 6.855208 , duration = 6.96 , readyState is 4
currentTime = 6.872229 , duration = 6.96 , readyState is 4
currentTime = 6.889229 , duration = 6.96 , readyState is 4