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

* feat: 增加 reload 方法 * doc: 增加 reload 视频示例 * doc: 移除不使用的命名空间 * refactor: 更新配置类为 PlayerOptions * doc: 根据最新设计更新示例 * doc: 增加菜单多语言
2024-11-30 02:58:37 +08:00 · 2024-09-03 10:48:05 +08:00 · 2024-09-03 10:48:05 +08:00 · cd2885b09a
commit cd2885b09a
parent 9e59472dd9
8 changed files with 65 additions and 98 deletions
--- a/src/BootstrapBlazor.Server/Components/Samples/Players.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Players.razor
@ -14,7 +14,7 @@
 <DemoBlock Title="@Localizer["PlayersNormalTitle"]"
           Introduction="@Localizer["PlayersNormalIntro"]"
           Name="Normal">
-    <Player OnInitAsync="InitNormalPlayer"></Player>
+    <Player Options="_options"></Player>
 </DemoBlock>

 <DemoBlock Title="@Localizer["PlayersHlsTitle"]"
@ -28,7 +28,7 @@
            <Display @bind-Value="@_url" />
        </div>
    </div>
-    <Player OnInitAsync="InitHlsPlayer"></Player>
+    <Player Options="_hlsOptions" @ref="_hlsPlayer"></Player>
 </DemoBlock>

@* <AttributeTable Items="@GetAttributes()" /> *@
--- a/src/BootstrapBlazor.Server/Components/Samples/Players.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Players.razor.cs
@ -13,8 +13,14 @@ public partial class Players

    private List<SelectedItem> Items { get; } = [];

+    private Player _hlsPlayer = default!;
+
+    private PlayerOptions _options = new();
+
+    private PlayerOptions _hlsOptions = new();
+
    /// <summary>
-    /// OnInitialized 方法
+    /// <inheritdoc/>
    /// </summary>
    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://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"));
-    }

-    private static Task<PlayerOption> InitNormalPlayer()
-    {
-        var options = new PlayerOption();
-        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" });
-        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.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" });
+        _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/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/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.Thumbnail.Enabled = true;
-        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-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-00004.jpg");
+        _options.Thumbnail.Enabled = true;
+        _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-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-00004.jpg");

-        options.Makers.Enabled = true;
-        options.Makers.Points.Add(new PlayerPoint() { Time = 10, Label = "First Marker" });
-        options.Makers.Points.Add(new PlayerPoint() { Time = 50, Label = "Second Marker" });
+        _options.Makers.Enabled = true;
+        _options.Makers.Points.Add(new PlayerPoint() { Time = 10, Label = "First 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()
-    {
-        var options = new PlayerOption
-        {
-            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);
+        _hlsOptions.Makers.Enabled = true;
+        _hlsOptions.Makers.Points.Add(new PlayerPoint() { Time = 60, Label = "First Marker" });
+        _hlsOptions.Makers.Points.Add(new PlayerPoint() { Time = 300, Label = "Second Marker" });
    }

    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();
        return Task.CompletedTask;
    }
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@ -4754,7 +4754,8 @@
    "ElementIcon": "Element Icon",
    "DrawerService": "DrawerService",
    "SortableList": "SortableList",
-    "WinBox": "WinBox"
+    "WinBox": "WinBox",
+    "Player": "Player"
  },
  "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
    "TablesHeaderTitle": "Header grouping function",
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@ -4754,7 +4754,8 @@
    "ElementIcon": "饿了么图标 ElementIcon",
    "DrawerService": "抽屉服务 DrawerService",
    "SortableList": "拖拽组件 SortableList",
-    "WinBox": "窗口 WinBox"
+    "WinBox": "窗口 WinBox",
+    "Player": "播放器 Player"
  },
  "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
    "TablesHeaderTitle": "表头分组功能",
--- a/src/Extensions/Components/BootstrapBlazor.Player/Player.razor.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Player/Player.razor.cs
@ -17,7 +17,7 @@ public partial class Player
    /// </summary>
    [Parameter]
    [EditorRequired]
-    public Func<Task<PlayerOption>>? OnInitAsync { get; set; }
+    public PlayerOptions? Options { get; set; }

    private string? ClassString => CssBuilder.Default("bb-video-player")
        .AddClassFromAttributes(AdditionalAttributes)
@ -29,11 +29,13 @@ public partial class Player
    /// <returns></returns>
    protected override async Task InvokeInitAsync()
    {
-        if (OnInitAsync != null)
-        {
-            var option = await OnInitAsync();
-            option.Language ??= CultureInfo.CurrentUICulture.Name;
-            await InvokeVoidAsync("init", Id, Interop, "", option);
-        }
+        await InvokeVoidAsync("init", Id, Interop, "", Options);
    }
+
+    /// <summary>
+    /// 重新配置播放器方法
+    /// </summary>
+    /// <param name="option"></param>
+    /// <returns></returns>
+    public Task Reload(PlayerOptions option) => InvokeVoidAsync("reload", Id, option);
 }
--- a/src/Extensions/Components/BootstrapBlazor.Player/Player.razor.js
+++ b/src/Extensions/Components/BootstrapBlazor.Player/Player.razor.js
@ -101,34 +101,24 @@ const setLang = (option) => {
    }
 }

-export function update(id, options) {
+export function reload(id, options) {
    const p = Data.get(id);
    if (p === null) {
        return;
    }
-    const { player, el } = p;
-    const source = options.source;
+
+    const { player, hls } = p;
+    const source = options.source.sources;
    delete options.source;
-    if (source.sources[0].type !== 'application/x-mpegURL') {
-        player.source = source;
-    }
-    else if (Hls.isSupported()) {
-        player.stop();
-        player.source = source;
-
-        if (p.hls === void 0) {
-            p.hls = new Hls();
-            p.hls.attachMedia(el);
+    if (hls) {
+        if (source.length > 0) {
+            const src = source[0].src;
+            hls.loadSource(src);
        }
-        p.hls.loadSource(source.sources[0].src)
-        el.load();
-        el.play();
-
-        p.hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
-            player.on('languagechange', () => {
-                setTimeout(() => hls.subtitleTrack = player.currentTrack, 300);
-            });
-        });
+    }
+    else {
+        player.poster = source.poster ?? options.poster;
+        player.source = source;
    }
 }

@ -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 p = Data.get(id);
    if (p) {
--- a/src/Extensions/Components/BootstrapBlazor.Player/PlayerOptions.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Player/PlayerOptions.cs
@ -9,7 +9,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// 播放器选项类
 /// </summary>
-public class PlayerOption
+public class PlayerOptions
 {
    /// <summary>
    /// 获得/设置 是否为 Hls 播放资源 默认 false
--- a/src/Extensions/Components/BootstrapBlazor.Player/PlayerSource.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Player/PlayerSource.cs
@ -2,8 +2,6 @@
 // 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/

-using System.Text.Json.Serialization;
-
 namespace BootstrapBlazor.Components;

 /// <summary>