XiaoFengBlazor.VideoPlayer基于Video.js类库，支持IPC流媒体直播，http//:ip.flv、ws//:ip.flv、http//:ip.mp4、m3u8等播放流
Get Started
$ dotnet add package XiaoFengBlazor.VideoPlayerReadme
感谢这篇文章的教程：https://www.cnblogs.com/densen2014/p/16981092.html Blazor组件自做十三: VideoPlayer 视频播放器
自学一下Blazor，我也做个视频播放器玩玩
# 欢迎使用 XiaoFengBlazor.VideoPlayer 工具库
| QQ群号 | QQ群 | 公众号 |
|---|---|---|
| 748408911 |  |  |
使用方法:
1.nuget包
XiaoFengBlazor.VideoPlayer
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using XiaoFengBlazor.Components
3.razor页面
<VideoPlayer MineType=EnumVideoType.m3u8 Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
<VideoPlayer MineType=EnumVideoType.mp4 Url="//vjs.zencdn.net/v/oceans.mp4" />
<VideoPlayer MineType=EnumVideoType.mp4 Url="//vjs.zencdn.net/v/oceans.mp4" Width="400" Height="300" Autoplay="false" Poster="//vjs.zencdn.net/v/oceans.png" />
批量视频播放
@page "/counter"
<PageTitle>Counter</PageTitle>
<VideoPlayer MineType=EnumVideoType.mp4 Url="http://192.168.0.194:80/rtp/02930F45.live.mp4" VideoJsPath="./video/video.min.js"
CssPath="./video/video-js.min.css" Liveui=true SourcesList=@videoSources />
@code {
List<VideoSources> videoSources = new List<VideoSources>
{
new VideoSources(EnumVideoType.mp4, "http://192.168.0.194:80/record/rtp/02930F45/2023-12-09/22-30-23-23.mp4"),
new VideoSources(EnumVideoType.mp4, "http://192.168.0.194:80/record/rtp/02930F45/2023-12-09/22-32-25-24.mp4"),
new VideoSources(EnumVideoType.mp4, "http://192.168.0.194:80/record/rtp/02930F45/2023-12-09/22-34-27-25.mp4"),
new VideoSources(EnumVideoType.mp4, "http://192.168.0.194:80/record/rtp/02930F45/2023-12-09/22-36-29-26.mp4")
};
}