XiaoFengBlazor.VideoPlayer 1.1.2023.1217

感谢这篇文章的教程：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")
    };
}

http...flv播放

@page "/fetchdata"
@inject HttpClient Http

<PageTitle>Weather forecast</PageTitle>
 
<VideoPlayer MineType=EnumVideoType.flv
             Url="http://192.168.0.194:80/rtp/02930F45.live.flv"
             Width="400"
             Height="300"
             Autoplay="true"
             Liveui=true
             VideoJsPath="./video/video.min.js"
             CssPath="./video/video-js.min.css" />

ws...flv播放 4/6/9宫格 播放

@page "/ninegrid"
<PageTitle>4宫格</PageTitle>

<div class="grid-container">
    @for (int i = 0; i < 4; i++)
    {
        <div class="grid-item">
            <VideoPlayer MineType=EnumVideoType.flv
                         Url="ws://192.168.0.194:80/rtp/02930F45.live.flv"
                         Width="400"
                         Height="300"
                         Autoplay="true"
                         Liveui=true
                         VideoJsPath="./video/video.min.js"
                         CssPath="./video/video-js.min.css" />
        </div>
    }
</div>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  padding: 20px;
  text-align: center;
}
</style>

4.参数说明

##效果图如下：

XiaoFeng 类库包含库