Why tag <video> does not load every time i reload page

So, I've got a tag video, and I'm trying to create a custom video player. I use a function formatTime to get the video's duration and convert it into a String like 00:51, and put this value as innerText to a div that represents the duration of the video. Originally it had the value as 00:00, but it must be updated after the duration is converted.

<video id="video" controls preload="metadata" src="img/about-us/preview.mp4" poster="img/about-us/preview.jpg"></video>

<div class="video-time">
     <time id="video-time-elapsed">00:00</time>
     <span>&nbsp;/&nbsp;</span>
     <time id="video-duration">00:00</time>
</div>

const video = document.getElementById("video");
const duration1 = document.getElementById("video-duration"); //

function formatTime(timeInSeconds) {
    const result = new Date(timeInSeconds * 1000).toISOString().substr(11,8);

    return {
        minutes: result.substr(3,2),
        seconds: result.substr(6,2),
    };
}

function initializeTime() {
    const videoDuration = Math.round(video.duration);
    seek.setAttribute("max", `${videoDuration}`);
    progressBar.setAttribute("max", `${videoDuration}`);
    const time = formatTime(videoDuration);
    duration1.innerText = `${time.minutes}:${time.seconds}`;
    duration1.setAttribute("datetime", `${time.minutes}m ${time.seconds}s`);
}

console.log(video.duration);
video.addEventListener("loadedmetadata", function () {
    initializeTime();
    console.log("loaded!");
})

I've got a problem here. It works 50% of the time when the page is reloaded! I found out that the video does not load every time I refresh the page. So I use the log to see what is happening with every page reload. I've checked the video duration and if metadata is loaded. And I have 3 cases of this:

1st case: everything loads and works good;

2nd case: video.duration is NaN but metadata loaded and still have correct value in duration1 and still everything works fine;

3rd case: video.duration loaded good but metadata is not and this time everything looks bad and time does not update when video is playing;

With disabled cache 3rd case happens 90% and two others 5%. In the network panel video does not load and loads only after you start the video.started video 18 seconds after page was reloaded

So I wanted to know why is this happening? What is the problem?