In asp.net core not playing hls

Question

I have Blazor server project for test how to play hls video. I created the video using ffmpeg (test.m3u8 and list of .ts files) and it plays without problems using VLC. To avoid Cors Policy error all video I load to wwwroot/3D folder. Additinally I try this .m3u8 file

https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8

with the same result

I use this code :

_hosts.cshtml :

@page "/"
@namespace TestHLS.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>*@
<script src="~/js/videojs-http-streaming.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:

@page "/"

<PageTitle>Index</PageTitle>


 <h1>Hello, world!</h1>


 <video id="my-video"  controls   
     muted="muted"
     autoplay="autoplay">  
     <source src=@videoSrc type="application/x-mpegURL"  />
     Your browser does not support the video tag
 </video>    

 @code{
  string videoSrc = "http://localhost:5293/3D/test.m3u8";     //string videoSrc = "http://localhost:5293/3D/bbk.mp4"; 

}

and program.cs:

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

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

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

builder.Services.AddCors(options =>
{
    options.AddPolicy("NewPolicy", builder =>
    builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader());
});


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";  //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.UseRouting();
app.UseCors("NewPolicy");

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

app.Run();

Now I see the initial image and get an error

Uncaught (in promise) DOMException: The play() request was interrupted because the media was removed from the document.

How to solve an issue?

Answer 1

Using below code, then you can play .m3u8 file normally.

@page "/test"
@model BlazorApp1.Pages.TestModel
<PageTitle>Test Page</PageTitle>

<!-- Video.js CSS -->
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet">

<!-- Your view content starts here -->
<div class="container">
    <h2>Test M3U8.</h2>
    <div>
        <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{}'>
            <source src="https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8" type="application/x-mpegURL">
            Your browser does not support the video tag.
        </video>
    </div>
</div>

<!-- Video.js JS and HLS plugin -->
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hls.js"></script>

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


@{
}