Search code examples
httpasp.net-core-webapihtml5-video

HTML5 video network request size/duration


I'm trying to understand how browsers handle video requests

Suppose I have an endpoint in an ASP.NET Minimal API that serves the video file:

app.MapGet("/video", async (HttpContext context) =>
{
    var filePath = "...";
    var binaryData = await File.ReadAllBytesAsync(filePath);
    return Results.File(binaryData, "video/mp4");
});

When I use fetch("/video"), the HTTP request completes in a 300 ms, and the size of the HTTP response shows as 52MB (full file size). fetch request

However, when I embed the video using <video src='/video'></video> and play it, the HTTP request remains open, and the size of the request changes for the entire duration of the video. media request

I expect the server to send the full video to the client, so the client should receive the entire video in the same 300 ms as in the fetch example. However, for some reason, the network request remains open for the entire duration of the video, and the video is downloaded progressively. Could you help me understand why and how this happens?


Solution

  • I found the answer to my question, hope it is helpful.

    The browser controls the TCP connection’s window size. Essentially, the browser’s TCP client can signal the server to pause data transmission(setting the window size to low value). Thus server waits for client to update window size before transmitting more data.

    This is kind of cool. When you embed a video on your website using this simple approach, the user doesn’t download the entire video file upfront. Since most users may not watch the entire video, transmitting the whole file from the start would be a waste of network resources.