Browser sending request for already buffered video data

Problem

As the title says, I'm seeing an issue where the browser (when seeking through a video) is constantly making requests for ranges of bytes it should already have.

Code

I've provided a minimal code sample; to replicate the issue, whip around the current time control on the video and look at your network log.

window.onload = function() {

  var myVideo = document.getElementById('my-video');

  myVideo.addEventListener('progress', function() {
    var bufferedEnd = myVideo.buffered.end(myVideo.buffered.length - 1);
    var duration = myVideo.duration;
    if (duration > 0) {
      document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration) * 100) + "%";
    }
  });

  myVideo.addEventListener('timeupdate', function() {
    var duration = myVideo.duration;
    if (duration > 0) {
      document.getElementById('progress-amount').style.width = ((myVideo.currentTime / duration) * 100) + "%";
    }
  });
}

.buffered {
  height: 20px;
  position: relative;
  background: #555;
  width: 300px;
}

#buffered-amount {
  display: block;
  height: 100%;
  background-color: #777;
  width: 0;
}

.progress {
  margin-top: -20px;
  height: 20px;
  position: relative;
  width: 300px;
}

#progress-amount {
  display: block;
  height: 100%;
  background-color: #595;
  width: 0;
}

<video id="my-video" controls preload="auto"><source src="https://media-dev.ozone.tech/media/e7ed8a40-cc10-4e8f-9ca4-f7ce2018e750/video_preview-1655242811.732922.mp4?Expires=1655683199&amp;Signature=GblI8GzddjxCP26Rqr0tfn1M1WzPrrdnKb5w7icjjFuughbV92Waz3tylFC3YZXU90u4wyD~VGeM5ThvbtbsGNf2YdkA0-z0xGdCMM0Uj9YpIbPi~SNccOjjCPXzCY~dYN4ANcdyN6~qlhTFammXuaE3-mfRceSeXXmDK76~wAa6VJLmPmKmrLNGYeULmd~XRGmGvxleT6LfFeAsmkSanue-AcV5amgARBeEVz5HHJMjAoy7OnnIWRsXJR2g6A7ZV9M77Szw-LGEzMVxspFak7pZj-BSAeTY~mUsXiMAfhINUcxiOf~dtJM8DBRaw3G5vGrWfueYtprcIbbRCHAI1Q__&amp;Key-Pair-Id=K16V0JZ9ZAOTC6" type="video/mp4"></video>
<div class="buffered">
  <span id="buffered-amount"></span>
</div>
<div class="progress">
  <span id="progress-amount"></span>
</div>

Question

Can someone explain why this is happening and how I can prevent it? Seems like this could potentially be a bug but since all the browsers are doing it, I wonder if it's something on my end; maybe the way we encode the video?

from Browser sending request for already buffered video data