feat(Player): add Reload instance method (#4192)

* feat: 增加 reload 方法

* doc: 增加 reload 视频示例

* doc: 移除不使用的命名空间

* refactor: 更新配置类为 PlayerOptions

* doc: 根据最新设计更新示例

* doc: 增加菜单多语言
This commit is contained in:
Argo Zhang 2024-09-03 10:48:05 +08:00 committed by GitHub
parent 9e59472dd9
commit cd2885b09a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 65 additions and 98 deletions

View File

@ -14,7 +14,7 @@
<DemoBlock Title="@Localizer["PlayersNormalTitle"]" <DemoBlock Title="@Localizer["PlayersNormalTitle"]"
Introduction="@Localizer["PlayersNormalIntro"]" Introduction="@Localizer["PlayersNormalIntro"]"
Name="Normal"> Name="Normal">
<Player OnInitAsync="InitNormalPlayer"></Player> <Player Options="_options"></Player>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["PlayersHlsTitle"]" <DemoBlock Title="@Localizer["PlayersHlsTitle"]"
@ -28,7 +28,7 @@
<Display @bind-Value="@_url" /> <Display @bind-Value="@_url" />
</div> </div>
</div> </div>
<Player OnInitAsync="InitHlsPlayer"></Player> <Player Options="_hlsOptions" @ref="_hlsPlayer"></Player>
</DemoBlock> </DemoBlock>
@* <AttributeTable Items="@GetAttributes()" /> *@ @* <AttributeTable Items="@GetAttributes()" /> *@

View File

@ -13,8 +13,14 @@ public partial class Players
private List<SelectedItem> Items { get; } = []; private List<SelectedItem> Items { get; } = [];
private Player _hlsPlayer = default!;
private PlayerOptions _options = new();
private PlayerOptions _hlsOptions = new();
/// <summary> /// <summary>
/// OnInitialized 方法 /// <inheritdoc/>
/// </summary> /// </summary>
protected override void OnInitialized() protected override void OnInitialized()
{ {
@ -29,52 +35,46 @@ public partial class Players
Items.Add(new SelectedItem("https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8", "TestVideo7")); Items.Add(new SelectedItem("https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8", "TestVideo7"));
Items.Add(new SelectedItem("https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8", "TestVideo8")); Items.Add(new SelectedItem("https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8", "TestVideo8"));
Items.Add(new SelectedItem("https://diceyk6a7voy4.cloudfront.net/e78752a1-2e83-43fa-85ae-3d508be29366/hls/fitfest-sample-1_Ott_Hls_Ts_Avc_Aac_16x9_1280x720p_30Hz_6.0Mbps_qvbr.m3u8", "TestVideo9")); Items.Add(new SelectedItem("https://diceyk6a7voy4.cloudfront.net/e78752a1-2e83-43fa-85ae-3d508be29366/hls/fitfest-sample-1_Ott_Hls_Ts_Avc_Aac_16x9_1280x720p_30Hz_6.0Mbps_qvbr.m3u8", "TestVideo9"));
}
private static Task<PlayerOption> InitNormalPlayer() _options.Source.Poster = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg";
{ _options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", Type = "video/mp4" });
var options = new PlayerOption(); _options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", Type = "video/mp4" });
options.Source.Poster = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"; _options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4", Type = "video/mp4" });
options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", Type = "video/mp4" });
options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", Type = "video/mp4" });
options.Source.Sources.Add(new PlayerSources { Url = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4", Type = "video/mp4" });
options.Source.Tracks.Add(new PlayerTracks { Src = "https://cdn.plyr.io/static/demo/video/View_From_A_Blue_Moon_Trailer-HD.en.vtt", SrcLang = "en", Label = "English", Default = true }); _options.Source.Tracks.Add(new PlayerTracks { Src = "https://cdn.plyr.io/static/demo/video/View_From_A_Blue_Moon_Trailer-HD.en.vtt", SrcLang = "en", Label = "English", Default = true });
options.Source.Tracks.Add(new PlayerTracks { Src = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt", SrcLang = "fr", Label = "Français" }); _options.Source.Tracks.Add(new PlayerTracks { Src = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt", SrcLang = "fr", Label = "Français" });
options.Thumbnail.Enabled = true; _options.Thumbnail.Enabled = true;
options.Thumbnail.PicNum = 184; _options.Thumbnail.PicNum = 184;
options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00001.jpg"); _options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00001.jpg");
options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00002.jpg"); _options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00002.jpg");
options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00003.jpg"); _options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00003.jpg");
options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00004.jpg"); _options.Thumbnail.Urls.Add("https://cdn.plyr.io/static/demo/thumbs/100p-00004.jpg");
options.Makers.Enabled = true; _options.Makers.Enabled = true;
options.Makers.Points.Add(new PlayerPoint() { Time = 10, Label = "First Marker" }); _options.Makers.Points.Add(new PlayerPoint() { Time = 10, Label = "First Marker" });
options.Makers.Points.Add(new PlayerPoint() { Time = 50, Label = "Second Marker" }); _options.Makers.Points.Add(new PlayerPoint() { Time = 50, Label = "Second Marker" });
return Task.FromResult(options); _hlsOptions.IsHls = true;
} _hlsOptions.Poster = "https://bitdash-a.akamaihd.net/content/sintel/poster.png";
_hlsOptions.Source.Sources.Add(new PlayerSources { Url = _url, Type = "application/x-mpegURL" });
private Task<PlayerOption> InitHlsPlayer() _hlsOptions.Makers.Enabled = true;
{ _hlsOptions.Makers.Points.Add(new PlayerPoint() { Time = 60, Label = "First Marker" });
var options = new PlayerOption _hlsOptions.Makers.Points.Add(new PlayerPoint() { Time = 300, Label = "Second Marker" });
{
IsHls = true,
Poster = "https://bitdash-a.akamaihd.net/content/sintel/poster.png"
};
options.Source.Sources.Add(new PlayerSources { Url = _url, Type = "application/x-mpegURL" });
options.Makers.Enabled = true;
options.Makers.Points.Add(new PlayerPoint() { Time = 60, Label = "First Marker" });
options.Makers.Points.Add(new PlayerPoint() { Time = 300, Label = "Second Marker" });
return Task.FromResult(options);
} }
private Task ChangeUrl(SelectedItem e) private Task ChangeUrl(SelectedItem e)
{ {
//_options.Source.Sources.Add(new PlayerSources { Url = _url, Type = _type }); _url = e.Value;
var options = new PlayerOptions();
options.Source.Sources.Add(new PlayerSources { Url = _url, Type = "application/x-mpegURL" });
options.Makers.Enabled = true;
options.Makers.Points.Add(new PlayerPoint() { Time = 10, Label = "First Marker" });
options.Makers.Points.Add(new PlayerPoint() { Time = 60, Label = "Second Marker" });
_hlsPlayer.Reload(options);
StateHasChanged(); StateHasChanged();
return Task.CompletedTask; return Task.CompletedTask;
} }

View File

@ -4754,7 +4754,8 @@
"ElementIcon": "Element Icon", "ElementIcon": "Element Icon",
"DrawerService": "DrawerService", "DrawerService": "DrawerService",
"SortableList": "SortableList", "SortableList": "SortableList",
"WinBox": "WinBox" "WinBox": "WinBox",
"Player": "Player"
}, },
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
"TablesHeaderTitle": "Header grouping function", "TablesHeaderTitle": "Header grouping function",

View File

@ -4754,7 +4754,8 @@
"ElementIcon": "饿了么图标 ElementIcon", "ElementIcon": "饿了么图标 ElementIcon",
"DrawerService": "抽屉服务 DrawerService", "DrawerService": "抽屉服务 DrawerService",
"SortableList": "拖拽组件 SortableList", "SortableList": "拖拽组件 SortableList",
"WinBox": "窗口 WinBox" "WinBox": "窗口 WinBox",
"Player": "播放器 Player"
}, },
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
"TablesHeaderTitle": "表头分组功能", "TablesHeaderTitle": "表头分组功能",

View File

@ -17,7 +17,7 @@ public partial class Player
/// </summary> /// </summary>
[Parameter] [Parameter]
[EditorRequired] [EditorRequired]
public Func<Task<PlayerOption>>? OnInitAsync { get; set; } public PlayerOptions? Options { get; set; }
private string? ClassString => CssBuilder.Default("bb-video-player") private string? ClassString => CssBuilder.Default("bb-video-player")
.AddClassFromAttributes(AdditionalAttributes) .AddClassFromAttributes(AdditionalAttributes)
@ -29,11 +29,13 @@ public partial class Player
/// <returns></returns> /// <returns></returns>
protected override async Task InvokeInitAsync() protected override async Task InvokeInitAsync()
{ {
if (OnInitAsync != null) await InvokeVoidAsync("init", Id, Interop, "", Options);
{
var option = await OnInitAsync();
option.Language ??= CultureInfo.CurrentUICulture.Name;
await InvokeVoidAsync("init", Id, Interop, "", option);
}
} }
/// <summary>
/// 重新配置播放器方法
/// </summary>
/// <param name="option"></param>
/// <returns></returns>
public Task Reload(PlayerOptions option) => InvokeVoidAsync("reload", Id, option);
} }

View File

@ -101,34 +101,24 @@ const setLang = (option) => {
} }
} }
export function update(id, options) { export function reload(id, options) {
const p = Data.get(id); const p = Data.get(id);
if (p === null) { if (p === null) {
return; return;
} }
const { player, el } = p;
const source = options.source; const { player, hls } = p;
const source = options.source.sources;
delete options.source; delete options.source;
if (source.sources[0].type !== 'application/x-mpegURL') { if (hls) {
player.source = source; if (source.length > 0) {
} const src = source[0].src;
else if (Hls.isSupported()) { hls.loadSource(src);
player.stop();
player.source = source;
if (p.hls === void 0) {
p.hls = new Hls();
p.hls.attachMedia(el);
} }
p.hls.loadSource(source.sources[0].src) }
el.load(); else {
el.play(); player.poster = source.poster ?? options.poster;
player.source = source;
p.hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
player.on('languagechange', () => {
setTimeout(() => hls.subtitleTrack = player.currentTrack, 300);
});
});
} }
} }
@ -139,31 +129,6 @@ export function setPoster(id, poster) {
}); });
} }
export function reload(id, url, type, poster) {
execute(id, p => {
const { player, hls } = p;
if (player.supports(type)) {
player.source = {
type: 'video',
title: 'Example title',
poster: poster,
sources: [
{
src: url,
type: type
}
]
};
}
else if (Hls.isSupported()) {
player.stop();
delete player.source;
hls.loadSource(url);
}
});
}
const execute = (id, callback) => { const execute = (id, callback) => {
const p = Data.get(id); const p = Data.get(id);
if (p) { if (p) {

View File

@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components;
/// <summary> /// <summary>
/// 播放器选项类 /// 播放器选项类
/// </summary> /// </summary>
public class PlayerOption public class PlayerOptions
{ {
/// <summary> /// <summary>
/// 获得/设置 是否为 Hls 播放资源 默认 false /// 获得/设置 是否为 Hls 播放资源 默认 false

View File

@ -2,8 +2,6 @@
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/ // Website: https://www.blazor.zone or https://argozhang.github.io/
using System.Text.Json.Serialization;
namespace BootstrapBlazor.Components; namespace BootstrapBlazor.Components;
/// <summary> /// <summary>