I dynamically injected three video tags into the HTML, using JavaScript. And, they all have the same URL. But, if I inspect my website, and then go to the Network tab, I see the exact same video loading three times (more than once), any idea why? Is that normal?

Not to mention that, I use this piece of code:

window.addEventListener('load', () => {
  let videoSrcArray = [];
  for (let i = 0; i < videos.length; i++) {
    const video = videos[i];
    videoSrcArray.push(video.src);
  }
  const uniqueVideoSrcArray = videoSrcArray.filter((a, i, arr) => arr.indexOf(a) == i);
  for (let i = 0; i < videos.length; i++) {
    const video = videos[i];
    for (let j = 0; j < uniqueVideoSrcArray.length; j++) {
      const uniqueVideoSrc = uniqueVideoSrcArray[j];
      if (video.src == uniqueVideoSrc) {
        const videoRequest = fetch(uniqueVideoSrc)
          .then(response => response.blob());
        videoRequest.then(blob => {
          video.src = window.URL.createObjectURL(blob);
        });
      }
    }
  }
});

Even unchecking Disable cahce option (Inspect -> Netowork tab) didn’t solve any problem… What should I do now?