在asp.net core中不玩hls

Question

我有 Blazor 服务器项目用于测试如何播放 hls 视频。我使用 ffmpeg（test.m3u8 和 .ts 文件列表）创建了视频，并且使用 VLC 播放没有问题。为了避免 Cors 策略错误，我将所有视频加载到 wwwroot/3D 文件夹。另外我尝试这个 .m3u8 文件

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

结果相同

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>

索引.剃刀：

@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"; 

}

和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();

现在我看到初始图像并收到错误

未捕获（承诺中）DOMException：由于媒体已从文档中删除，所以 play() 请求被中断。

如何解决问题？

Answer 1

使用下面的代码，就可以正常播放

.m3u8

文件了。

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


@{
}