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

[mip1983]

Is there an existing issue for this?

• 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 usually 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

1. New Empty Aspire Starter solution.
2. Add new Blazor web app, server mode (include in orchestration)
3. Add some mp4 files to your wwwroot/assets
4. 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]

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]

@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]

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

[mip1983]

@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]

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

[mip1983]

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

@mkArtakMSFT Yes, just double checked it now, the previous project on .NET8 with 'UseStaticFiles' doesn't have the issue.

[mip1983]

Thank you for fixing this, @javiercn, is there a way for me to know what .NET version or nuget package will include this fix? (So I know when to remove my work arounds)

[LucaCris]

I confirm the problem passing from Net8 (all ok) to Net9 (errors loading static audio):

The program.cs has nothing about Static Files, as from wizard...

[wraza2k9]

The Map Static Assets feature in Version 9.0 typically compresses static assets stored in the wwwroot folder and also modify the headers while deliver the files to browers. These may cause issues with audio files, leading to incorrect playback in browsers or another issue.

To avoid this problem, consider the following:
(i) Use UseStaticAssets instead MapStaticAssets
(ii)Serve Audio Files from a Separate Location:
Utilize custom file providers to serve audio files from a location outside the wwwroot folder.
For detailed guidance on serving files from multiple locations, refer to the official Microsoft documentation:
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-9.0#deliver-assets-with-map-static-assets-routing-endpoint-conventions

[LucaCris]

@wraza2k9 the standard webassembly Blazor App has no UseStaticAssets or MapStaticAssets in program.cs. Net8 & 9.

[robinwilson16]

Just struggling with this where a file will play one minute and then not the next giving the 416 error and everything here is marked as closed or a duplicate yet the issue remains unfixed.
I'm working through the workarounds but I have to change about 50 links to audio files.

Is it going to be addressed soon as I may then need to undo my workaround again so perhaps I should hold on.

EDIT
It looks like the workarounds don't work because as @LucaCris says UseStaticAssets and MapStaticAssets are not valid in .NET 9

[vijuhe]

This issue is reproducible in my web assembly Blazor application as well. I'm using the latest .NET 9 and web assembly related out of the box NuGet packages. I have a wav file in the wwwroot folder and using it has worked just fine before the .NET 9 upgrade.

Wouldn't even want to try the workarounds but rather have this fixed.

[HKunogi]

You can swap app.MapStaticAssets() for app.UseStaticFiles() and then it works.

[erva0008]

I'm also facing this. Any idea when this will get serviced? 😊
Works with UseStaticFiles and fails with MapStaticAssets.

[BRGustavoRibeiro]

I'm also having this problem. Blazor Server can't output a 10mb static video.

[LucaCris]

Try this in csproj:

<PropertyGroup> ... ... <CompressionEnabled>false</CompressionEnabled> <StaticWebAssetFingerprintingEnabled>false</StaticWebAssetFingerprintingEnabled> <StaticWebAssetsFingerprintContent>false</StaticWebAssetsFingerprintContent> <DisableBuildCompression>true</DisableBuildCompression> </PropertyGroup>

[aserie]

The fix was backported to 9.x in #59325 and is now available in 9.0.2 which was just released. Just tested it and am no longer seeing issues using MapStaticAssets.

[LucaCris]

I can confirm that my workaround is no more necessary with 9.0.2. So for me: solved.