示例:
https://www.blazor.zone/videoPlayers
https://blazor.app1.es/videoPlayers
使用方法:
1.nuget包
BootstrapBlazor.VideoPlayer
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using BootstrapBlazor.Components
3.razor页面
<VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
<VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
<VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" Width="400" Height="300" Autoplay="false" Poster="//vjs.zencdn.net/v/oceans.png" />
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) | 设置封面 | |
| Func<string, Task>? | OnError | 错误回调 |
v 8.0.5
- 优化组件
v 8.0.1
- 修复播放器某些特殊浏览器无法播放的问题, 升级内置播放器版本到 8.6.1
- 添加 VideoJsPath : 自定义video.js路径,默认为null,使用内置video.js
- 添加 LanguagePath : 自定义语言包路径,默认为null,使用内置语言包
v7.0.2
- 添加 Language : 界面语言,默认 获取当前文化, 例如 zh-CN / en-US,如果语言包不存在,回退到 zh-CN
v7.0.3
- 如果语言代码与子代码（例如en-us）不匹配，则使用主代码（例如en）的匹配项（如果可用）, 如果语言包不存在,回退到 zh-CN
