Loading an mp4 video static asset in Blazor returns http 416 error

mip1983 commented 10 hours ago

Is there an existing issue for this?

[x] I have searched the existing issues

Describe the bug

In a Blazor web project (.NET 9), I've got an html5 video as a static asset (in wwwroot/assets/video).

If I try and display this video in an HTML5 element, no video appears and I see an HTTP 416 error in the console. I've tried a few different files (mp4) in case it was specific to a file, but the same occurs. I've tried with/without a timestamp on the src url, still no video.

Here's an example of the code I'm trying, various permutations commented out, in MainLayout.razor of a Blazor web app template, no interactivity used in this component, statically rendered server side.

<div id="videoContainer">
    <video id="backgroundVideo" class="transition fading" autoplay muted playsinline disablePictureInPicture controlsList="nodownload">
        @* <source src="@Assets["assets/video/leaf-watercolor-background-trim.mp4"]" type="video/mp4" /> *@
        @* <source src="@Assets["assets/video/leaf-watercolor-background-trim.mp4"]#t=0.01,3" type="video/mp4" /> *@
        <source src="@Assets["assets/video/leaf-load-circle.mp4"]" type="video/mp4" />
        @* <source src="assets/video/background_video.mp4" type="video/mp4" /> *@
    </video>
</div>

I get the same behavior if I use MapStaticAssets or UseStaticFiles in my program.cs, and whether I link directly to the file or use 'Assets["file"]'

If I navigate directly to the video path in the browser, it will usually load the video (though not consistent. Once it's loaded the video this way, it will start working with the html video element.

Here is an example of the error:

I'm not seeing this on an older project doing similar in .NET 8. I'm getting this debugging locally from visual studio, I don't know yet if it carries through to deployment.

System/Project details:

Visual Studio 2022: Version 17.12.0 Preview 5.0 .NET Aspire starter template with Blazor Web project (running the project via Aspire AppHost) .NET 9 RC2, latest preview nuget packages.

Expected Behavior

No 416 error, the host should serve the video file.

Steps To Reproduce

Minimal repro:

Visual studio 2022 preview, .NET 9

New Empty Aspire Starter solution.
Add new Blazor web app, server mode (include in orchestration)
Add some mp4 files to your wwwroot/assets
Try to show these videos with an html5 video tag in the MainLayout e.g.

<style>
    #videoContainer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
    }

    #backgroundVideo {
        width: 100%;
        opacity: 0.6;
        filter: brightness(80%) saturate(120%);
        object-fit: fill;
    }
</style>

<div id="videoContainer">
    <video id="backgroundVideo" class="transition fading" autoplay muted playsinline disablePictureInPicture controlsList="nodownload">
        @* <source src="@Assets["assets/video/leaf-watercolor-background-trim.mp4"]" type="video/mp4" /> *@
        @* <source src="@Assets["assets/video/leaf-watercolor-background-trim.mp4"]#t=0.01,3" type="video/mp4" /> *@
        <source src="@Assets["assets/video/leaf-load-circle.mp4"]" type="video/mp4" />
        @* <source src="assets/video/background_video.mp4" type="video/mp4" /> *@
    </video>
</div>

Exceptions (if any)

No response

.NET Version

9.0.100-rc.2.24474.11

Anything else?

Visual Studio 2022: Version 17.12.0 Preview 5.0 .NET Aspire starter template with Blazor Web project (running the project via Aspire AppHost) .NET 9 RC2, latest preview nuget packages.

.NET SDK: Version: 9.0.100-rc.2.24474.11 Commit: 315e1305db Workload version: 9.0.100-manifests.0c3a5b37 MSBuild version: 17.12.0-preview-24473-03+fea15fbd1

Runtime Environment: OS Name: Windows OS Version: 10.0.22631 OS Platform: Windows RID: win-x64 Base Path: C:\Program Files\dotnet\sdk\9.0.100-rc.2.24474.11\

.NET workloads installed: [android] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 35.0.0-rc.2.152/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.sdk.android\35.0.0-rc.2.152\WorkloadManifest.json Install Type: Msi

[aspire] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 8.2.1/8.0.100 Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.aspire\8.2.1\WorkloadManifest.json Install Type: Msi

[ios] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 18.0.9600-net9-rc2/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.sdk.ios\18.0.9600-net9-rc2\WorkloadManifest.json Install Type: Msi

[maccatalyst] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 18.0.9600-net9-rc2/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.sdk.maccatalyst\18.0.9600-net9-rc2\WorkloadManifest.json Install Type: Msi

[maui-windows] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 9.0.0-rc.2.24503.2/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.sdk.maui\9.0.0-rc.2.24503.2\WorkloadManifest.json Install Type: Msi

[wasm-tools] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3, VS 17.12.35424.110 Manifest Version: 9.0.0-rc.2.24473.5/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.workload.mono.toolchain.current\9.0.0-rc.2.24473.5\WorkloadManifest.json Install Type: Msi

[wasm-tools-net6] Installation Source: SDK 9.0.100-rc.2, VS 17.11.35327.3 Manifest Version: 9.0.0-rc.2.24473.5/9.0.100-rc.2 Manifest Path: C:\Program Files\dotnet\sdk-manifests\9.0.100-rc.2\microsoft.net.workload.mono.toolchain.net6\9.0.0-rc.2.24473.5\WorkloadManifest.json Install Type: Msi

Configured to use loose manifests when installing new manifests.

Host: Version: 9.0.0-rc.2.24473.5 Architecture: x64 Commit: 990ebf52fc

.NET SDKs installed: 8.0.403 [C:\Program Files\dotnet\sdk] 9.0.100-rc.2.24474.11 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.App 6.0.35 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 8.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 9.0.0-rc.2.24474.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.35 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 8.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 9.0.0-rc.2.24473.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.32 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.35 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 8.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 9.0.0-rc.2.24474.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found: x86 [C:\Program Files (x86)\dotnet] registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables: Not set

global.json file: Not found

Learn more: https://aka.ms/dotnet/info

Download .NET: https://aka.ms/dotnet/download

mip1983 commented 10 hours ago

If anyone else hits this, I've got a temporary work around which seems to work, bypassing the StaticAssets/Files middleware with your own endpoint:

app.MapGet("/file/video", () =>
    {
        var path = Path.Combine(app.Environment.ContentRootPath, "wwwroot", "assets", "video", "video.mp4");
        return Results.File(path, "video/mp4");
    })
    .AllowAnonymous();

javiercn commented 10 hours ago

@mip1983 thanks for contacting us.

Seems like a bug in the endpoint implementation.

~~Can you provide the raw request headers?~~ Nevermind, I just saw the Range request header.

Instead of using Results.File, could you try with app.UseStaticFiles()?

Does the issue reproduce if you don't use the fingerprinted endpoint?

javiercn commented 9 hours ago

The issue very likely is on the handling of range requests.

mip1983 commented 8 hours ago

@mip1983 thanks for contacting us.

Seems like a bug in the endpoint implementation.

~Can you provide the raw request headers?~ Nevermind, I just saw the Range request header.

Instead of using Results.File, could you try with app.UseStaticFiles()?

Does the issue reproduce if you don't use the fingerprinted endpoint?

Hi @javiercn,

I'm only using the endpoint with Results.File as a work around (this serves the video successfully). The issue occurs both with 'UseStaticFiles' and 'MapStaticAssets', whether you link direct to the file or use the Assets['file'] notation.

mkArtakMSFT commented 6 hours ago

Thanks @mip1983. Can you please confirm if this worked in .NET 8 with .UseStaticFiles middleware?

dotnet / aspnetcore