mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-11-30 02:58:37 +08:00
feat(Player): add Reload instance method (#4192)
* feat: 增加 reload 方法 * doc: 增加 reload 视频示例 * doc: 移除不使用的命名空间 * refactor: 更新配置类为 PlayerOptions * doc: 根据最新设计更新示例 * doc: 增加菜单多语言
This commit is contained in:
parent
9e59472dd9
commit
cd2885b09a
@ -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()" /> *@
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -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": "表头分组功能",
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components;
|
|||||||
/// <summary>
|
/// <summary>
|
||||||
/// 播放器选项类
|
/// 播放器选项类
|
||||||
/// </summary>
|
/// </summary>
|
||||||
public class PlayerOption
|
public class PlayerOptions
|
||||||
{
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 获得/设置 是否为 Hls 播放资源 默认 false
|
/// 获得/设置 是否为 Hls 播放资源 默认 false
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user