Media src in <video> tag randomly crashes due to failed 206 response

Discord Q&A strapi-questions
1

I have a .mp4 file uploaded to the Media Library, and through the API I get the public URL of the resource. I assign the URL to the video like so:

  <source src={url} type="video/mp4" />
</video>```

The video starts playing as expected, but then randomly freezes, sometimes several loops down the line (the video is about a minute long).

When I inspect what's going on I notice two things:
- The browser did a range request, and it failed. The first request succeeds, but down the line the browser does a second request with a different range that fails. I've attached 3 images, showing the 2 requests. Notice that the second one fails with reponse content-length `-10009384` even though the second request range header `bytes=15237120-` is within the content size reported in the first request (`20464856`)
- Since I have Strapi running locally, I notice the following error logged

```[2024-09-12 10:24:16.571] http: GET /uploads/banner_video_e1bcb1837b.mp4 (2 ms) 206

  Error: write ECONNRESET
      at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:95:16)
      at WriteWrap.callbackTrampoline (node:internal/async_hooks:130:17)```

Issue noticed on Chrome, Strapi v4.24.1 and Node v20.16.0. Any ideas šŸ˜€ ?

<i>This topic has been created from a Discord post (1283785137485516973) to give it more visibility.
It will be on Read-Only mode here.
<a href="https://discord.com/channels/811989166782021633/1283785137485516973/1283785137485516973">Join the conversation on Discord</a></i>
2

206 isnt a failed response, but a successful one.
but why make additional requests?

3

can you show us the code of the request you are making?

4

also, this might be of help with understanding what is going on and why there are several requests and why some of them fail.

5

By failing I mean, it returns a bad response with a negative content-length header. Afaik this is not an expected response.

The request for the video URL is being made by the browser, since all I do is set the src attribute on the <source> tag inside the <video> tag. Iā€™m not doing any special requests through JavaScript on the media URL. I just have an API request to get the resource URL for the video, and that part works fine.

As shown in the original post the URL being requested is /uploads/banner_video_e1bcb1837b.mp4

6

Media src in