Seeking / Scrubbing sometimes results in 200 request instead of 206

[nikolayganovski1]

I'm using the latest version of video js, and sometimes when I scrub / seek (click on the seek bar), it stucks loading.
If I look at the Network tab, I see there's a 200 request being made to the .mp4 file, thus downloading it all(like 1GB of data). Instead it should do a regular 206 request where it downloads just a chunk(few megabytes). This happens once in every 10-20 clicks on the seek bar.

I'm using jQuery v3.5.1, no additional plugins for vjs., Chrome browser.
Is it possible to be a server issue?

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

If you're playing an mp4, this is all handled by the browser, and you're going to have the same behavior without Video.js as well.
If your server doesn't accept byte range requests, it may be causing the issue.

[nikolayganovski1]

Okay I put some timeout before calling the videojs() function, apparently the browser makes a default videoplayer by itself, and then videojs overlays it. How can I prevent the default video player from showing?

edit: okay I've set the preload="none" on the video tag, so it does not run the default HTML video player initially. But the 200 request still occurs.
On videojs first initialization, it makes like 3-4 206 requests to the mp4 file:

you can see 1.mp4 ran fine, but when I requested 2.mp4 it bugged

here's the code I call:

if (typeof myPlayer!=="undefined" && myPlayer!=null) {
      var oldPlayer = document.getElementById('video_episode');
      videojs(oldPlayer).dispose();
      myPlayer = null;
    }

var sources = '<source src="'+file+'" type="video/mp4" label="720p" res="720" />';

$('.video-player-holder').html('<div class="episode-number-holder">'+name+'</div>\
      <video  \
      id="video_episode"\
      class="video-js vjs-default-skin"\
      controls\
      preload="none"\
      width="1280"\
      height="720"\
      poster="/wp-content/themes/theme1/assets_dashboard/img/grey-gradient.jpg?v=1"\
      data-setup="{}"\
    >\
    '+sources+'\
      '+tracks+'\
      <p class="vjs-no-js">\
        To view this video please enable JavaScript, and consider upgrading to a\
        web browser that\
        <a href="https://videojs.com/html5-video-support/" target="_blank"\
          >supports HTML5 video</a\
        >\
      </p>\
    </video>\
    ');

setTimeout(function() {
      var options = {
             controlBar: {
                children: [
                   'playToggle',
                   'volumePanel',
                   'progressControl',
                   // 'qualitySelector',
                   'CaptionsButton',
                   'fullscreenToggle',
                ],
             },
             autoplay: true,
             preload: 'none',
          };
      myPlayer = videojs('video_episode', options);
      setTimeout(function() {
        myPlayer.play();
      }, 50);
      if (load_episode) {
          myPlayer.currentTime(time1);
      }
}, 500);

EDIT3: I've red somewhere that the browser detects your connection speed(mine is pretty strong, 500Mbps), and adjusts the preload/download of the file based on your speed, is that right?
EDIT4: The issue doesn't seem to be happening in Mozilla Firefox. So must be Chrome thing.

[nikolayganovski1]

still nothing... anyone?

[gkatsev]

Since you're using an mp4, it will always be played and loaded directly by the browser. The only thing I can imagine is that the server you're using to host your mp4 doesn't interact nicely with how Chrome loads media.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.