XiaoFengBlazor.VideoPlayer
1.1.2023.1217
dotnet add package XiaoFengBlazor.VideoPlayer --version 1.1.2023.1217
NuGet\Install-Package XiaoFengBlazor.VideoPlayer -Version 1.1.2023.1217
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="XiaoFengBlazor.VideoPlayer" Version="1.1.2023.1217" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add XiaoFengBlazor.VideoPlayer --version 1.1.2023.1217
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: XiaoFengBlazor.VideoPlayer, 1.1.2023.1217"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install XiaoFengBlazor.VideoPlayer as a Cake Addin #addin nuget:?package=XiaoFengBlazor.VideoPlayer&version=1.1.2023.1217 // Install XiaoFengBlazor.VideoPlayer as a Cake Tool #tool nuget:?package=XiaoFengBlazor.VideoPlayer&version=1.1.2023.1217
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
感谢这篇文章的教程: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.参数说明
类型 | 参数 | 说明 | 默认值 |
---|---|---|---|
string | Url | 资源地址 | null |
string | MineType | 资源类型,video/mp4, application/x-mpegURL, video/ogg .. 更多参考 EnumVideoType | application/x-mpegURL |
int | Width | 宽度 | 300 |
int | Height | 高度 | 200 |
bool | Controls | 显示控制条 | true |
bool | Autoplay | 自动播放 | true |
string | Poster | 设置封面资源,相对或者绝对路径 | |
string | Language | 界面语言,默认 获取当前文化, 例如 zh-CN / en-US,如果语言包不存在,回退到 zh-CN | 当前文化 |
VideoPlayerOption | Option | 播放器选项, 不为空则优先使用播放器选项,否则使用参数构建 | null |
async Task | Reload(string? url, string? type) | 切换播放资源 | |
async Task | SetPoster(string? poster) | 设置封面 | |
string | VideoJsPath | 因为video.js版本问题,8.0之后对flv ws支持不友好,直接报错,于是我使用了7.0的js。所以我在调用的位置,使用我指定的js版本 参考这个 https://cdn.bootcdn.net/ajax/libs/video.js/7.21.5/alt/video.core.min.js | |
string | CssPath | 因为video.js版本问题,8.0之后对flv ws支持不友好,直接报错,于是我使用了7.0的js。所以我在调用的位置,使用我指定的css版本 | |
int | InactivityTimeout | 用于定义用户在多少毫秒内没有与播放器进行交互之后,系统会将其判定为“不活跃”,设置0 是不用判断 | |
string | CssPath | 因为video.js版本问题,8.0之后对flv ws支持不友好,直接报错,于是我使用了7.0的js。所以我在调用的位置,使用我指定的css版本 | |
bool | Liveui | 允许玩家使用新的实时 UI | |
bool | Fluid | 播放器将具有可变大小 | |
bool | Debug | 显示调试信息 | |
double[] | PlaybackRates | 严格大于 0 的数字数组,其中 1 表示正常速度 (100%)、0.5表示半速(50%)、2表示双速(200%)等 |
##效果图如下:
XiaoFeng 类库包含库
命名空间 | 所属类库 | 开源状态 | 说明 | 包含功能 |
---|---|---|---|---|
XiaoFeng.Prototype | XiaoFeng.Core | ✅ | 扩展库 | ToCase 类型转换<br/>ToTimestamp,ToTimestamps 时间转时间戳<br/>GetBasePath 获取文件绝对路径,支持Linux,Windows<br/>GetFileName 获取文件名称<br/>GetMatch,GetMatches,GetMatchs,IsMatch,ReplacePatten,RemovePattern 正则表达式操作<br/> |
XiaoFeng.Net | XiaoFeng.Net | ✅ | 网络库 | XiaoFeng网络库,封装了Socket客户端,服务端(Socket,WebSocket),根据当前库可轻松实现订阅,发布等功能。 |
XiaoFeng.Http | XiaoFeng.Core | ✅ | 模拟请求库 | 模拟网络请求 |
XiaoFeng.Data | XiaoFeng.Core | ✅ | 数据库操作库 | 支持SQLSERVER,MYSQL,ORACLE,达梦,SQLITE,ACCESS,OLEDB,ODBC等数十种数据库 |
XiaoFeng.Cache | XiaoFeng.Core | ✅ | 缓存库 | 内存缓存,Redis,MemcachedCache,MemoryCache,FileCache缓存 |
XiaoFeng.Config | XiaoFeng.Core | ✅ | 配置文件库 | 通过创建模型自动生成配置文件,可为xml,json,ini文件格式 |
XiaoFeng.Cryptography | XiaoFeng.Core | ✅ | 加密算法库 | AES,DES,RSA,MD5,DES3,SHA,HMAC,RC4加密算法 |
XiaoFeng.Excel | XiaoFeng.Excel | ✅ | Excel操作库 | Excel操作,创建excel,编辑excel,读取excel内容,边框,字体,样式等功能 |
XiaoFeng.Ftp | XiaoFeng.Ftp | ✅ | FTP请求库 | FTP客户端 |
XiaoFeng.IO | XiaoFeng.Core | ✅ | 文件操作库 | 文件读写操作 |
XiaoFeng.Json | XiaoFeng.Core | ✅ | Json序列化,反序列化库 | Json序列化,反序列化库 |
XiaoFeng.Xml | XiaoFeng.Core | ✅ | Xml序列化,反序列化库 | Xml序列化,反序列化库 |
XiaoFeng.Log | XiaoFeng.Core | ✅ | 日志库 | 写日志文件,数据库 |
XiaoFeng.Memcached | XiaoFeng.Memcached | ✅ | Memcached缓存库 | Memcached中间件,支持.NET框架、.NET内核和.NET标准库,一种非常方便操作的客户端工具。实现了Set,Add,Replace,PrePend,Append,Cas,Get,Gets,Gat,Gats,Delete,Touch,Stats,Stats Items,Stats Slabs,Stats Sizes,Flush_All,Increment,Decrement,线程池功能。 |
XiaoFeng.Redis | XiaoFeng.Redis | ✅ | Redis缓存库 | Redis中间件,支持.NET框架、.NET内核和.NET标准库,一种非常方便操作的客户端工具。实现了Hash,Key,String,ZSet,Stream,Log,List,订阅发布,线程池功能; |
XiaoFeng.Threading | XiaoFeng.Core | ✅ | 线程库 | 线程任务,线程队列 |
XiaoFeng.Mvc | XiaoFeng.Mvc | ❌ | 低代码WEB开发框架 | .net core 基础类,快速开发CMS框架,真正的低代码平台,自带角色权限,WebAPI平台,后台管理,可托管到服务运行命令为:应用.exe install 服务名 服务说明,命令还有 delete 删除 start 启动 stop 停止。 |
XiaoFeng.Proxy | XiaoFeng.Proxy | ✅ | 代理库 | 开发中 |
XiaoFeng.TDengine | XiaoFeng.TDengine | ✅ | TDengine 客户端 | 开发中 |
XiaoFeng.GB28181 | XiaoFeng.GB28181 | ✅ | 视频监控库,SIP类库,GB28181协议 | 开发中 |
XiaoFeng.Onvif | XiaoFeng.Onvif | ✅ | 视频监控库Onvif协议 | XiaoFeng.Onvif 基于.NET平台使用C#封装Onvif常用接口、设备、媒体、云台等功能, 拒绝WCF服务引用动态代理生成wsdl类文件 , 使用原生XML扩展标记语言封装参数,所有的数据流向都可控。 |
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.0)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.0)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.1.2023.1217 | 150 | 12/17/2023 |
1.0.2023.1217 | 123 | 12/17/2023 |
1.0.2023.1211 | 124 | 12/11/2023 |
兼容任何版本