Error when trying to play a .m3u8 video in a blazor server project

Question

Dear Gurus!I I receive a .m3u8 file using ffmpeg, and it plays fine in VLC. In the Blazor project, the _hosts.cshtml file looks like:

@page "/"
@namespace BlazorHS.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}
<base href="~/" />

<script src="~/js/video.min.js"></script>
<script src="~/js/videojs-contrib-hls.js"></script>
 <link  href="~/js/video-js.css" rel="stylesheet" />

 <component type="typeof(App)" render-mode="ServerPrerendered" />

 <script>
    document.addEventListener('DOMContentLoaded', function () {
       
        var player = videojs('my-video');
        player.play();
    });
</script>

Index.razor looks like:

@page "/"

 <video id="my-video" src=@videoSrc  type="application/x-mpegURL"  controls></video>    

@code{

  string videoSrc = "http://localhost:5032/3D/test.m3u8";

}

And program.cs looks like:

using BlazorHS.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.FileProviders;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}


app.UseStaticFiles();


var provider = new FileExtensionContentTypeProvider();

provider.Mappings[".m3u8"] = "application/x-mpegURL";

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

var fileProvider3D = new PhysicalFileProvider("D:/3D");
app.UseDirectoryBrowser(new DirectoryBrowserOptions
{
    FileProvider = fileProvider3D,
    RequestPath = "/3D",
});

//app.UseCors("NewPolicy");


app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

When I run the project I get an error:

VIDEOJS: ERROR (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED

How I can fix the issue?

Answer 1

Deleting comment