!3627 doc(#I66EIA): update document for VideoPlayer component

* doc(#I66JGA): update document for VideoPlayer component
This commit is contained in:
alex_zou 2022-12-17 01:53:16 +00:00 committed by Argo
parent f47f14afef
commit 4bbeb606ea
2 changed files with 17 additions and 24 deletions

View File

@ -27,10 +27,10 @@
<DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Nomal">
<div class="row g-3">
<div class="col-6">
<VideoPlayer SourcesType="application/x-mpegURL" SourcesUrl="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
<VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
</div>
<div class="col-6">
<VideoPlayer SourcesType="video/mp4" SourcesUrl="//vjs.zencdn.net/v/oceans.mp4" />
<VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
</div>
</div>
@ -43,23 +43,23 @@
<Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ChangeURL" />
</div>
<div class="col-6 col-sm-6 col-md-6 col-xl-auto">
<BootstrapInput @bind-Value="@SourcesUrl" />
<BootstrapInput @bind-Value="@Url" />
</div>
<div class="col-6 col-sm-6 col-md-4 col-xl-auto">
<BootstrapInput @bind-Value="@SourcesType" />
<BootstrapInput @bind-Value="@MineType" />
</div>
<div class="col-6 col-sm-6 col-md-2 col-xl-auto">
<Button Color="Color.Primary" OnClick="Apply">加载</Button>
</div>
</div>
<br />
<VideoPlayer @ref="Player" SourcesType="@SourcesType" SourcesUrl="@SourcesUrl" Width="500" Height="380" />
<VideoPlayer @ref="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<br />
<h5>SourcesType 类型</h5>
<h5>MineType 类型</h5>
<ol>
<li>opus: 'video/ogg'</li>
<li>ogv: 'video/ogg'</li>

View File

@ -9,8 +9,8 @@ namespace BootstrapBlazor.Shared.Samples;
/// </summary>
public partial class VideoPlayers
{
private string SourcesType = "video/mp4";
private string SourcesUrl = "//vjs.zencdn.net/v/oceans.mp4";
private string MineType = "video/mp4";
private string Url = "//vjs.zencdn.net/v/oceans.mp4";
[NotNull]
private VideoPlayer? Player { get; set; }
@ -45,8 +45,8 @@ public partial class VideoPlayers
private async Task ChangeURL(SelectedItem e)
{
SourcesUrl = e.Value;
SourcesType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL";
Url = e.Value;
MineType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL";
StateHasChanged();
await Apply();
}
@ -54,7 +54,7 @@ public partial class VideoPlayers
private async Task Apply()
{
await Player.SetPoster("//vjs.zencdn.net/v/oceans.png");
await Player.Reload(SourcesUrl, SourcesType);
await Player.Reload(Url, MineType);
}
/// <summary>
@ -65,14 +65,14 @@ public partial class VideoPlayers
{
// TODO: 移动到数据库中
new() {
Name = nameof(VideoPlayer.SourcesUrl),
Name = nameof(VideoPlayer.Url),
Description = "资源地址",
Type = "string?",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = nameof(VideoPlayer.SourcesType),
Name = nameof(VideoPlayer.MineType),
Description = "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ",
Type = "string?",
ValueList = "(见页脚)",
@ -114,21 +114,14 @@ public partial class VideoPlayers
DefaultValue = " — "
},
new() {
Name = nameof(VideoPlayer.Option),
Description = "播放器选项, 不为空则优先使用播放器选项,否则使用参数构建",
Type = "VideoPlayerOption",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = "Reload(string? url, string? type)",
Name = "Reload(string url, string type)",
Description = "切换播放资源",
Type = "async Task",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = "SetPoster(string? poster)",
Name = "SetPoster(string poster)",
Description = "设置封面",
Type = "async Task",
ValueList = " — ",
@ -137,7 +130,7 @@ public partial class VideoPlayers
new() {
Name = "OnError",
Description = "错误回调",
Type = "Func<string, Task>??",
Type = "Func<string, Task>?",
ValueList = " — ",
DefaultValue = " — "
},