3

I am creating a custom html5 video player that can play live stream, record live stream and play regular video files. for recording i am using RecordRTC. everything runs well but i need to create a custom seeking bar. to do that i just simply use

var seekerPosition = (video.currentTime * 1000) / (video.duration * 1000);
var seekerValue = seekerPosition * 100 + "%";  

and add this value to the bar's css width. but my seeker bar starts after some time the video starts to play. from this question i found that video duration is only available when the video's readyState is changed. so i checked for it even if the readyState is 4, the duration shows Infinity. here's my code:

<video id="video" class="video" muted></video>  

 

function startTracking() {
    reqId = requestAnimationFrame(function play() {
        console.log("currentTime = " + video.currentTime + " , duration = " + video.duration + " , readyState is " + video.readyState);
        var seekerPosition = (video.currentTime * 1000) / (video.duration * 1000);
        var seekerValue = seekerPosition * 100 + "%";
        //console.log("( " + (video.currentTime * 1000) + " / " + (video.duration * 1000) + " ) * 100 = " + seekerValue);
        $(seeker).css("width", seekerValue);
        reqId = requestAnimationFrame(play);
    });
};  

function stopTracking() {
    if (reqId) {
        cancelAnimationFrame(reqId);
    }
};  

function togglePlayPause() {
    if ($(playPause).hasClass("play")) {
        $(playPause).addClass("pause").removeClass("play");
        video.pause();
        if (recorder === null && liveStream === null)
            stopTracking();
    }
    else if ($(playPause).hasClass("pause")) {
        $(playPause).addClass("play").removeClass("pause");
        video.play();
        if (recorder === null && liveStream === null)
            startTracking();
    }
}  

I have just recorded a 7 second video then played it, and i am also showing you the console.log result. this result is generated from the startTracking function.

 currentTime = 0.221292 , duration = Infinity , readyState is 4
 currentTime = 0.238313 , duration = Infinity , readyState is 4
 currentTime = 0.25625 , duration = Infinity , readyState is 4
 currentTime = 0.271875 , duration = Infinity , readyState is 4
 currentTime = 0.288854 , duration = Infinity , readyState is 4
 currentTime = 0.304854 , duration = Infinity , readyState is 4
 currentTime = 0.322396 , duration = Infinity , readyState is 4
 currentTime = 0.338375 , duration = Infinity , readyState is 4
 currentTime = 0.355396 , duration = Infinity , readyState is 4
 currentTime = 0.371375 , duration = Infinity , readyState is 4
 currentTime = 0.388375 , duration = Infinity , readyState is 4
 currentTime = 0.405313 , duration = Infinity , readyState is 4
 currentTime = 0.421396 , duration = Infinity , readyState is 4
 currentTime = 0.438438 , duration = Infinity , readyState is 4
 currentTime = 0.456375 , duration = Infinity , readyState is 4
 currentTime = 0.472396 , duration = Infinity , readyState is 4
 currentTime = 0.488396 , duration = Infinity , readyState is 4
 currentTime = 0.505396 , duration = Infinity , readyState is 4
 currentTime = 0.521417 , duration = Infinity , readyState is 4
 currentTime = 0.539375 , duration = Infinity , readyState is 4
 currentTime = 0.555417 , duration = Infinity , readyState is 4
 currentTime = 0.571292 , duration = Infinity , readyState is 4
 currentTime = 0.588292 , duration = Infinity , readyState is 4
 currentTime = 0.605313 , duration = Infinity , readyState is 4
 currentTime = 0.622396 , duration = Infinity , readyState is 4
 currentTime = 0.639438 , duration = Infinity , readyState is 4
 currentTime = 0.655417 , duration = Infinity , readyState is 4
 currentTime = 0.671396 , duration = Infinity , readyState is 4
 currentTime = 0.688354 , duration = Infinity , readyState is 4
 currentTime = 0.705354 , duration = Infinity , readyState is 4
 currentTime = 0.721479 , duration = Infinity , readyState is 4
 currentTime = 0.738375 , duration = Infinity , readyState is 4
 currentTime = 0.755396 , duration = Infinity , readyState is 4
 currentTime = 0.772375 , duration = Infinity , readyState is 4
 currentTime = 0.789333 , duration = Infinity , readyState is 4
 currentTime = 0.805333 , duration = Infinity , readyState is 4
 currentTime = 0.821417 , duration = Infinity , readyState is 4
 currentTime = 0.839417 , duration = Infinity , readyState is 4
 currentTime = 0.856375 , duration = Infinity , readyState is 4
 currentTime = 0.872354 , duration = Infinity , readyState is 4
 currentTime = 0.888417 , duration = Infinity , readyState is 4
 currentTime = 0.905417 , duration = Infinity , readyState is 4
 currentTime = 0.921417 , duration = Infinity , readyState is 4
 currentTime = 0.939333 , duration = Infinity , readyState is 4
 currentTime = 0.955417 , duration = Infinity , readyState is 4
 currentTime = 0.972354 , duration = Infinity , readyState is 4
 currentTime = 0.988313 , duration = Infinity , readyState is 4
 currentTime = 1.005313 , duration = Infinity , readyState is 4
 currentTime = 1.021396 , duration = Infinity , readyState is 4
 currentTime = 1.038313 , duration = Infinity , readyState is 4
 currentTime = 1.05625 , duration = Infinity , readyState is 4
 currentTime = 1.071271 , duration = Infinity , readyState is 4
 currentTime = 1.088271 , duration = Infinity , readyState is 4
 currentTime = 1.105229 , duration = Infinity , readyState is 4
 currentTime = 1.121958 , duration = Infinity , readyState is 4
 currentTime = 1.138938 , duration = Infinity , readyState is 4
 currentTime = 1.155417 , duration = Infinity , readyState is 4
 currentTime = 1.171333 , duration = Infinity , readyState is 4
 currentTime = 1.188333 , duration = Infinity , readyState is 4
 currentTime = 1.206333 , duration = Infinity , readyState is 4
 currentTime = 1.221938 , duration = Infinity , readyState is 4
 currentTime = 1.238396 , duration = Infinity , readyState is 4
 currentTime = 1.257396 , duration = Infinity , readyState is 4
 currentTime = 1.271354 , duration = Infinity , readyState is 4
 currentTime = 1.288354 , duration = Infinity , readyState is 4
 currentTime = 1.306354 , duration = Infinity , readyState is 4
 currentTime = 1.321333 , duration = Infinity , readyState is 4
 currentTime = 1.338271 , duration = Infinity , readyState is 4
 currentTime = 1.35525 , duration = Infinity , readyState is 4
 currentTime = 1.372229 , duration = Infinity , readyState is 4
 currentTime = 1.389167 , duration = Infinity , readyState is 4
 currentTime = 1.406167 , duration = Infinity , readyState is 4
 currentTime = 1.421208 , duration = Infinity , readyState is 4
 currentTime = 1.43925 , duration = Infinity , readyState is 4
 currentTime = 1.455229 , duration = Infinity , readyState is 4
 currentTime = 1.471188 , duration = Infinity , readyState is 4
 currentTime = 1.488229 , duration = Infinity , readyState is 4
 currentTime = 1.506229 , duration = Infinity , readyState is 4
 currentTime = 1.521271 , duration = Infinity , readyState is 4
 currentTime = 1.539208 , duration = Infinity , readyState is 4
 currentTime = 1.55525 , duration = Infinity , readyState is 4
 currentTime = 1.572167 , duration = Infinity , readyState is 4
 currentTime = 1.589167 , duration = Infinity , readyState is 4
 currentTime = 1.605167 , duration = Infinity , readyState is 4
 currentTime = 1.622271 , duration = Infinity , readyState is 4
 currentTime = 1.639208 , duration = Infinity , readyState is 4
 currentTime = 1.655167 , duration = Infinity , readyState is 4
 currentTime = 1.67125 , duration = Infinity , readyState is 4
 currentTime = 1.689188 , duration = Infinity , readyState is 4
 currentTime = 1.705188 , duration = Infinity , readyState is 4
 currentTime = 1.721229 , duration = Infinity , readyState is 4
 currentTime = 1.73825 , duration = Infinity , readyState is 4
 currentTime = 1.755188 , duration = Infinity , readyState is 4
 currentTime = 1.772667 , duration = Infinity , readyState is 4
 currentTime = 1.788667 , duration = Infinity , readyState is 4
 currentTime = 1.805667 , duration = Infinity , readyState is 4
 currentTime = 1.821292 , duration = Infinity , readyState is 4
 currentTime = 1.838292 , duration = Infinity , readyState is 4
 currentTime = 1.855313 , duration = Infinity , readyState is 4
 currentTime = 1.871292 , duration = Infinity , readyState is 4
 currentTime = 1.888292 , duration = Infinity , readyState is 4
 currentTime = 1.90525 , duration = Infinity , readyState is 4
 currentTime = 1.92125 , duration = Infinity , readyState is 4
 currentTime = 1.938271 , duration = Infinity , readyState is 4
 currentTime = 1.955313 , duration = Infinity , readyState is 4
 currentTime = 1.97125 , duration = Infinity , readyState is 4
 currentTime = 1.98825 , duration = Infinity , readyState is 4
 currentTime = 2.006229 , duration = Infinity , readyState is 4
 currentTime = 2.021313 , duration = Infinity , readyState is 4
 currentTime = 2.038292 , duration = Infinity , readyState is 4
 currentTime = 2.055604 , duration = Infinity , readyState is 4
 currentTime = 2.07125 , duration = Infinity , readyState is 4
 currentTime = 2.08825 , duration = Infinity , readyState is 4
 currentTime = 2.106313 , duration = Infinity , readyState is 4
 currentTime = 2.122313 , duration = Infinity , readyState is 4
 currentTime = 2.138292 , duration = Infinity , readyState is 4
 currentTime = 2.155333 , duration = Infinity , readyState is 4
 currentTime = 2.172271 , duration = Infinity , readyState is 4
 currentTime = 2.188271 , duration = Infinity , readyState is 4
 currentTime = 2.205271 , duration = Infinity , readyState is 4
 currentTime = 2.221208 , duration = Infinity , readyState is 4
 currentTime = 2.238208 , duration = Infinity , readyState is 4
 currentTime = 2.255667 , duration = Infinity , readyState is 4
 currentTime = 2.270729 , duration = Infinity , readyState is 4
 currentTime = 2.289292 , duration = Infinity , readyState is 4
 currentTime = 2.306292 , duration = Infinity , readyState is 4
 currentTime = 2.321292 , duration = Infinity , readyState is 4
 currentTime = 2.338313 , duration = Infinity , readyState is 4
 currentTime = 2.356292 , duration = Infinity , readyState is 4
 currentTime = 2.372229 , duration = Infinity , readyState is 4
 currentTime = 2.389229 , duration = Infinity , readyState is 4
 currentTime = 2.406229 , duration = Infinity , readyState is 4
 currentTime = 2.421313 , duration = Infinity , readyState is 4
 currentTime = 2.439229 , duration = Infinity , readyState is 4
 currentTime = 2.455229 , duration = Infinity , readyState is 4
 currentTime = 2.471188 , duration = Infinity , readyState is 4
 currentTime = 2.489188 , duration = Infinity , readyState is 4
 currentTime = 2.505188 , duration = Infinity , readyState is 4
 currentTime = 2.521229 , duration = Infinity , readyState is 4
 currentTime = 2.538208 , duration = Infinity , readyState is 4
 currentTime = 2.556208 , duration = Infinity , readyState is 4
 currentTime = 2.571188 , duration = Infinity , readyState is 4
 currentTime = 2.588188 , duration = Infinity , readyState is 4
 currentTime = 2.605167 , duration = Infinity , readyState is 4
 currentTime = 2.622208 , duration = Infinity , readyState is 4
 currentTime = 2.639188 , duration = Infinity , readyState is 4
 currentTime = 2.655188 , duration = Infinity , readyState is 4
 currentTime = 2.672229 , duration = Infinity , readyState is 4
 currentTime = 2.688188 , duration = Infinity , readyState is 4
 currentTime = 2.706188 , duration = Infinity , readyState is 4
 currentTime = 2.722646 , duration = Infinity , readyState is 4
 currentTime = 2.740667 , duration = Infinity , readyState is 4
 currentTime = 2.756979 , duration = Infinity , readyState is 4
 currentTime = 2.772292 , duration = Infinity , readyState is 4
 currentTime = 2.789229 , duration = Infinity , readyState is 4
 currentTime = 2.805229 , duration = Infinity , readyState is 4
 currentTime = 2.821313 , duration = Infinity , readyState is 4
 currentTime = 2.838333 , duration = Infinity , readyState is 4
 currentTime = 2.85625 , duration = Infinity , readyState is 4
 currentTime = 2.872229 , duration = Infinity , readyState is 4
 currentTime = 2.889271 , duration = Infinity , readyState is 4
 currentTime = 2.905271 , duration = Infinity , readyState is 4
 currentTime = 2.921292 , duration = Infinity , readyState is 4
 currentTime = 2.938271 , duration = Infinity , readyState is 4
 currentTime = 2.957271 , duration = Infinity , readyState is 4
 currentTime = 2.971313 , duration = Infinity , readyState is 4
 currentTime = 2.988292 , duration = Infinity , readyState is 4
 currentTime = 3.005292 , duration = Infinity , readyState is 4
 currentTime = 3.022229 , duration = Infinity , readyState is 4
 currentTime = 3.038313 , duration = Infinity , readyState is 4
 currentTime = 3.055271 , duration = Infinity , readyState is 4
 currentTime = 3.07125 , duration = Infinity , readyState is 4
 currentTime = 3.090604 , duration = Infinity , readyState is 4
 currentTime = 3.107604 , duration = Infinity , readyState is 4
 currentTime = 3.120708 , duration = Infinity , readyState is 4
 currentTime = 3.138292 , duration = Infinity , readyState is 4
 currentTime = 3.155271 , duration = Infinity , readyState is 4
 currentTime = 3.17125 , duration = Infinity , readyState is 4
 currentTime = 3.18825 , duration = Infinity , readyState is 4
 currentTime = 3.205313 , duration = Infinity , readyState is 4
 currentTime = 3.221292 , duration = Infinity , readyState is 4
 currentTime = 3.239313 , duration = Infinity , readyState is 4
 currentTime = 3.255292 , duration = Infinity , readyState is 4
 currentTime = 3.27125 , duration = Infinity , readyState is 4
 currentTime = 3.289229 , duration = Infinity , readyState is 4
 currentTime = 3.306229 , duration = Infinity , readyState is 4
 currentTime = 3.321625 , duration = Infinity , readyState is 4
 currentTime = 3.338208 , duration = Infinity , readyState is 4
 currentTime = 3.356292 , duration = Infinity , readyState is 4
 currentTime = 3.37225 , duration = Infinity , readyState is 4
 currentTime = 3.38825 , duration = Infinity , readyState is 4
 currentTime = 3.405292 , duration = Infinity , readyState is 4
 currentTime = 3.42125 , duration = Infinity , readyState is 4
 currentTime = 3.438271 , duration = Infinity , readyState is 4
 currentTime = 3.456271 , duration = Infinity , readyState is 4
 currentTime = 3.471313 , duration = Infinity , readyState is 4
 currentTime = 3.489208 , duration = Infinity , readyState is 4
 currentTime = 3.506208 , duration = Infinity , readyState is 4
 currentTime = 3.52125 , duration = Infinity , readyState is 4
 currentTime = 3.538313 , duration = Infinity , readyState is 4
 currentTime = 3.55525 , duration = Infinity , readyState is 4
 currentTime = 3.571188 , duration = Infinity , readyState is 4
 currentTime = 3.588188 , duration = Infinity , readyState is 4
 currentTime = 3.605313 , duration = Infinity , readyState is 4
 currentTime = 3.621292 , duration = Infinity , readyState is 4
 currentTime = 3.640688 , duration = Infinity , readyState is 4
 currentTime = 3.657604 , duration = Infinity , readyState is 4
 currentTime = 3.672333 , duration = Infinity , readyState is 4
 currentTime = 3.688333 , duration = Infinity , readyState is 4
 currentTime = 3.705188 , duration = Infinity , readyState is 4
 currentTime = 3.722208 , duration = Infinity , readyState is 4
 currentTime = 3.738271 , duration = Infinity , readyState is 4
 currentTime = 3.755271 , duration = Infinity , readyState is 4
 currentTime = 3.771292 , duration = Infinity , readyState is 4
 currentTime = 3.788292 , duration = Infinity , readyState is 4
 currentTime = 3.805292 , duration = Infinity , readyState is 4
 currentTime = 3.821271 , duration = Infinity , readyState is 4
 currentTime = 3.838313 , duration = Infinity , readyState is 4
 currentTime = 3.856646 , duration = Infinity , readyState is 4
 currentTime = 3.872229 , duration = Infinity , readyState is 4
 currentTime = 3.888229 , duration = Infinity , readyState is 4
 currentTime = 3.905229 , duration = Infinity , readyState is 4
 currentTime = 3.921229 , duration = Infinity , readyState is 4
 currentTime = 3.938229 , duration = Infinity , readyState is 4
 currentTime = 3.955188 , duration = Infinity , readyState is 4
 currentTime = 3.971542 , duration = Infinity , readyState is 4
 currentTime = 3.989625 , duration = Infinity , readyState is 4
 currentTime = 4.007625 , duration = Infinity , readyState is 4
 currentTime = 4.020688 , duration = Infinity , readyState is 4
 currentTime = 4.038313 , duration = Infinity , readyState is 4
 currentTime = 4.05525 , duration = Infinity , readyState is 4
 currentTime = 4.071313 , duration = Infinity , readyState is 4
 currentTime = 4.088313 , duration = Infinity , readyState is 4
 currentTime = 4.106229 , duration = Infinity , readyState is 4
 currentTime = 4.121646 , duration = Infinity , readyState is 4
 currentTime = 4.139625 , duration = Infinity , readyState is 4
 currentTime = 4.155313 , duration = Infinity , readyState is 4
 currentTime = 4.171229 , duration = Infinity , readyState is 4
 currentTime = 4.18925 , duration = Infinity , readyState is 4
 currentTime = 4.20525 , duration = Infinity , readyState is 4
 currentTime = 4.222271 , duration = Infinity , readyState is 4
 currentTime = 4.238292 , duration = Infinity , readyState is 4
 currentTime = 4.256313 , duration = Infinity , readyState is 4
 currentTime = 4.271292 , duration = Infinity , readyState is 4
 currentTime = 4.289229 , duration = Infinity , readyState is 4
 currentTime = 4.304229 , duration = Infinity , readyState is 4
 currentTime = 4.322313 , duration = Infinity , readyState is 4
 currentTime = 4.338292 , duration = Infinity , readyState is 4
 currentTime = 4.354292 , duration = Infinity , readyState is 4
 currentTime = 4.372229 , duration = Infinity , readyState is 4
 currentTime = 4.389229 , duration = Infinity , readyState is 4
 currentTime = 4.404229 , duration = Infinity , readyState is 4
 currentTime = 4.422333 , duration = 6.96 , readyState is 4
 currentTime = 4.439313 , duration = 6.96 , readyState is 4
 currentTime = 4.454271 , duration = 6.96 , readyState is 4
 currentTime = 4.472292 , duration = 6.96 , readyState is 4
 currentTime = 4.489292 , duration = 6.96 , readyState is 4
 currentTime = 4.504292 , duration = 6.96 , readyState is 4
 currentTime = 4.521313 , duration = 6.96 , readyState is 4
 currentTime = 4.539271 , duration = 6.96 , readyState is 4
 currentTime = 4.555313 , duration = 6.96 , readyState is 4
 currentTime = 4.571271 , duration = 6.96 , readyState is 4
 currentTime = 4.589646 , duration = 6.96 , readyState is 4
 currentTime = 4.604646 , duration = 6.96 , readyState is 4
 currentTime = 4.621625 , duration = 6.96 , readyState is 4
 currentTime = 4.639333 , duration = 6.96 , readyState is 4
 currentTime = 4.655292 , duration = 6.96 , readyState is 4
 currentTime = 4.671292 , duration = 6.96 , readyState is 4
 currentTime = 4.688292 , duration = 6.96 , readyState is 4
 currentTime = 4.704313 , duration = 6.96 , readyState is 4
 currentTime = 4.721313 , duration = 6.96 , readyState is 4
 currentTime = 4.739313 , duration = 6.96 , readyState is 4
 currentTime = 4.754313 , duration = 6.96 , readyState is 4
 currentTime = 4.771271 , duration = 6.96 , readyState is 4
 currentTime = 4.788271 , duration = 6.96 , readyState is 4
 currentTime = 4.804229 , duration = 6.96 , readyState is 4
 currentTime = 4.822333 , duration = 6.96 , readyState is 4
 currentTime = 4.839313 , duration = 6.96 , readyState is 4
 currentTime = 4.855271 , duration = 6.96 , readyState is 4
 currentTime = 4.871313 , duration = 6.96 , readyState is 4
 currentTime = 4.889188 , duration = 6.96 , readyState is 4
 currentTime = 4.904188 , duration = 6.96 , readyState is 4
 currentTime = 4.92125 , duration = 6.96 , readyState is 4
 currentTime = 4.938208 , duration = 6.96 , readyState is 4
 currentTime = 4.954229 , duration = 6.96 , readyState is 4
 currentTime = 4.972188 , duration = 6.96 , readyState is 4
 currentTime = 4.989646 , duration = 6.96 , readyState is 4
 currentTime = 5.006646 , duration = 6.96 , readyState is 4
 currentTime = 5.024625 , duration = 6.96 , readyState is 4
 currentTime = 5.05425 , duration = 6.96 , readyState is 4
 currentTime = 5.071292 , duration = 6.96 , readyState is 4
 currentTime = 5.089271 , duration = 6.96 , readyState is 4
 currentTime = 5.104271 , duration = 6.96 , readyState is 4
 currentTime = 5.122208 , duration = 6.96 , readyState is 4
 currentTime = 5.138229 , duration = 6.96 , readyState is 4
 currentTime = 5.15525 , duration = 6.96 , readyState is 4
 currentTime = 5.171167 , duration = 6.96 , readyState is 4
 currentTime = 5.188146 , duration = 6.96 , readyState is 4
 currentTime = 5.204146 , duration = 6.96 , readyState is 4
 currentTime = 5.221313 , duration = 6.96 , readyState is 4
 currentTime = 5.239229 , duration = 6.96 , readyState is 4
 currentTime = 5.254208 , duration = 6.96 , readyState is 4
 currentTime = 5.27125 , duration = 6.96 , readyState is 4
 currentTime = 5.289271 , duration = 6.96 , readyState is 4
 currentTime = 5.304271 , duration = 6.96 , readyState is 4
 currentTime = 5.32125 , duration = 6.96 , readyState is 4
 currentTime = 5.338229 , duration = 6.96 , readyState is 4
 currentTime = 5.355229 , duration = 6.96 , readyState is 4
 currentTime = 5.371167 , duration = 6.96 , readyState is 4
 currentTime = 5.388167 , duration = 6.96 , readyState is 4
 currentTime = 5.405167 , duration = 6.96 , readyState is 4
 currentTime = 5.42125 , duration = 6.96 , readyState is 4
 currentTime = 5.438229 , duration = 6.96 , readyState is 4
 currentTime = 5.454229 , duration = 6.96 , readyState is 4
 currentTime = 5.47125 , duration = 6.96 , readyState is 4
 currentTime = 5.489146 , duration = 6.96 , readyState is 4
 currentTime = 5.504146 , duration = 6.96 , readyState is 4
 currentTime = 5.52125 , duration = 6.96 , readyState is 4
 currentTime = 5.539229 , duration = 6.96 , readyState is 4
 currentTime = 5.555229 , duration = 6.96 , readyState is 4
 currentTime = 5.571167 , duration = 6.96 , readyState is 4
 currentTime = 5.588167 , duration = 6.96 , readyState is 4
 currentTime = 5.605146 , duration = 6.96 , readyState is 4
 currentTime = 5.622313 , duration = 6.96 , readyState is 4
 currentTime = 5.639229 , duration = 6.96 , readyState is 4
 currentTime = 5.655208 , duration = 6.96 , readyState is 4
 currentTime = 5.67125 , duration = 6.96 , readyState is 4
 currentTime = 5.689167 , duration = 6.96 , readyState is 4
 currentTime = 5.704167 , duration = 6.96 , readyState is 4
 currentTime = 5.721229 , duration = 6.96 , readyState is 4
 currentTime = 5.738229 , duration = 6.96 , readyState is 4
 currentTime = 5.755229 , duration = 6.96 , readyState is 4
 currentTime = 5.771188 , duration = 6.96 , readyState is 4
 currentTime = 5.788167 , duration = 6.96 , readyState is 4
 currentTime = 5.805167 , duration = 6.96 , readyState is 4
 currentTime = 5.839229 , duration = 6.96 , readyState is 4
 currentTime = 5.855229 , duration = 6.96 , readyState is 4
 currentTime = 5.871292 , duration = 6.96 , readyState is 4
 currentTime = 5.888292 , duration = 6.96 , readyState is 4
 currentTime = 5.904188 , duration = 6.96 , readyState is 4
 currentTime = 5.921229 , duration = 6.96 , readyState is 4
 currentTime = 5.93925 , duration = 6.96 , readyState is 4
 currentTime = 5.954229 , duration = 6.96 , readyState is 4
 currentTime = 5.971167 , duration = 6.96 , readyState is 4
 currentTime = 5.988167 , duration = 6.96 , readyState is 4
 currentTime = 6.004167 , duration = 6.96 , readyState is 4
 currentTime = 6.02225 , duration = 6.96 , readyState is 4
 currentTime = 6.039229 , duration = 6.96 , readyState is 4
 currentTime = 6.054208 , duration = 6.96 , readyState is 4
 currentTime = 6.07125 , duration = 6.96 , readyState is 4
 currentTime = 6.089646 , duration = 6.96 , readyState is 4
 currentTime = 6.104646 , duration = 6.96 , readyState is 4
 currentTime = 6.122688 , duration = 6.96 , readyState is 4
 currentTime = 6.138292 , duration = 6.96 , readyState is 4
 currentTime = 6.15525 , duration = 6.96 , readyState is 4
 currentTime = 6.171208 , duration = 6.96 , readyState is 4
 currentTime = 6.189188 , duration = 6.96 , readyState is 4
 currentTime = 6.204188 , duration = 6.96 , readyState is 4
 currentTime = 6.221208 , duration = 6.96 , readyState is 4
 currentTime = 6.23825 , duration = 6.96 , readyState is 4
 currentTime = 6.255229 , duration = 6.96 , readyState is 4
 currentTime = 6.271229 , duration = 6.96 , readyState is 4
 currentTime = 6.289167 , duration = 6.96 , readyState is 4
 currentTime = 6.304167 , duration = 6.96 , readyState is 4
 currentTime = 6.322229 , duration = 6.96 , readyState is 4
 currentTime = 6.339271 , duration = 6.96 , readyState is 4
 currentTime = 6.354188 , duration = 6.96 , readyState is 4
 currentTime = 6.372146 , duration = 6.96 , readyState is 4
 currentTime = 6.388146 , duration = 6.96 , readyState is 4
 currentTime = 6.40525 , duration = 6.96 , readyState is 4
 currentTime = 6.42125 , duration = 6.96 , readyState is 4
 currentTime = 6.438208 , duration = 6.96 , readyState is 4
 currentTime = 6.454208 , duration = 6.96 , readyState is 4
 currentTime = 6.472208 , duration = 6.96 , readyState is 4
 currentTime = 6.488208 , duration = 6.96 , readyState is 4
 currentTime = 6.504167 , duration = 6.96 , readyState is 4
 currentTime = 6.521229 , duration = 6.96 , readyState is 4
 currentTime = 6.539208 , duration = 6.96 , readyState is 4
 currentTime = 6.555229 , duration = 6.96 , readyState is 4
 currentTime = 6.572188 , duration = 6.96 , readyState is 4
 currentTime = 6.588188 , duration = 6.96 , readyState is 4
 currentTime = 6.60525 , duration = 6.96 , readyState is 4
 currentTime = 6.621208 , duration = 6.96 , readyState is 4
 currentTime = 6.638208 , duration = 6.96 , readyState is 4
 currentTime = 6.654229 , duration = 6.96 , readyState is 4
 currentTime = 6.672188 , duration = 6.96 , readyState is 4
 currentTime = 6.689167 , duration = 6.96 , readyState is 4
 currentTime = 6.705167 , duration = 6.96 , readyState is 4
 currentTime = 6.72225 , duration = 6.96 , readyState is 4
 currentTime = 6.738229 , duration = 6.96 , readyState is 4
 currentTime = 6.754208 , duration = 6.96 , readyState is 4
 currentTime = 6.771229 , duration = 6.96 , readyState is 4
 currentTime = 6.788229 , duration = 6.96 , readyState is 4
 currentTime = 6.804208 , duration = 6.96 , readyState is 4
 currentTime = 6.82125 , duration = 6.96 , readyState is 4
 currentTime = 6.838229 , duration = 6.96 , readyState is 4
 currentTime = 6.855208 , duration = 6.96 , readyState is 4
Wahid Masud
  • 993
  • 10
  • 35
  • Streams are by default not seekable. If the file is provided as a stream the content length is not set in the response header and the browser will just play what's coming in. You don't state server or source URL, but you need to provide the video via the server as a fixed-length file by setting the content length. (The server should also ideally allow byte-ranges for doing seeking more efficiently, if it isn't). –  Sep 06 '18 at 02:25
  • So it essentially means that I cant seek a direct blob in the browser no matter what. uploading to server is the final state.if the user wants to play the recorded video before uploading it, then he needs to see the seeking bar. maybe an alternative way would be, save the stream in the local hard drive right after recording it, then when user wants to play it before uploading, i will provide the locally saved video as source. – Wahid Masud Sep 06 '18 at 09:27

1 Answers1

4

You can also set the media element's currentTime to Number.MAX_SAFE_INTEGER and then back to 0 again, this will force the browser to parse the whole video till the end and return the last frame for you.

This will allow you to have a seekable video bar.

Kitanga Nday
  • 3,517
  • 2
  • 17
  • 29
  • 1
    In chrome setting the `currentTime` value to 0 left me with an unplayable video, but setting it to 0.1 worked fine. – Infineight Aug 20 '21 at 16:08
  • @Infineight that sounds just about right, this feature is so broken, so many years have passed and they don't want to fix any of this. – Kitanga Nday Aug 21 '21 at 20:42
  • 1
    I thank you, especially for the explanation that you give to this solution: indeed, I had found it elsewhere on Stackoverflow, but in raw solution, without explanation. – Olivier C May 12 '23 at 04:47
  • 1
    @OlivierC always happy to help comrade – Kitanga Nday May 12 '23 at 05:28