!3622 feat(#I668T1): add VideoPlayer components

* Update BootstrapBlazor.Shared.csproj
* feat(#I668T1): add VideoPlayer components
* feat(#I668T1): add VideoPlayer components

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -31,6 +31,7 @@
     <PackageReference Include="BootstrapBlazor.SummerNote" Version="7.*" />
     <PackageReference Include="BootstrapBlazor.TableExport" Version="7.*" />
     <PackageReference Include="BootstrapBlazor.Topology" Version="7.*" />
+    <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="7.*" />
   </ItemGroup>
 
   <ItemGroup>

src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs

@@ -586,6 +586,12 @@ internal static class MenusLocalizerExtensions
                     IsNew = true,
                     Text = Localizer["PdfReader"],
                     Url = "PdfReaders"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["VideoPlayer"],
+                    Url = "videoPlayers"
                 }
             };
             AddBadge(item);

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1566,7 +1566,8 @@
     "NotificationText": "Notification",
     "SignaturePadText": "SignaturePad",
     "BluetoothText": "Bluetooth & Printer",
-    "PdfReaderText": "PDF Reader"
+    "PdfReaderText": "PDF Reader",
+    "VideoPlayerText": "VideoPlayer"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "Breakpoints",
@@ -4379,7 +4380,8 @@
     "RibbonTab": "RibbonTab",
     "PulseButton": "PulseButton",
     "Bluetooth": "Bluetooth & Printer",
-    "PdfReader": "PDF Reader"
+    "PdfReader": "PDF Reader",
+    "VideoPlayer": "VideoPlayer"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "Header grouping function",
@@ -5397,5 +5399,17 @@
     "P2": "This component relies on <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'><code>BootstrapBlazor.PdfReader</code></a>, which needs to reference its component package when using this component",
     "P3": "Nuget Install",
     "P4": "Use nuget.org to install <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'><code>BootstrapBlazor.PdfReader</code></a> component"
+  },
+  "BootstrapBlazor.Shared.Samples.VideoPlayers": {
+    "Title": "VideoPlayer",
+    "BaseUsageText": "Basic usage",
+    "BaseUsageIntro": "",
+    "BaseUsageText2": "Switch playback resources",
+    "BaseUsageIntro2": "Use the Reload method to switch playback resources",
+    "Tips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards.",
+    "P1": "Precautions",
+    "P2": "This component relies on <a href='https://www.nuget.org/packages?q=BootstrapBlazor.VideoPlayer' target='_blank'><code>BootstrapBlazor.VideoPlayer</code></a>, which needs to reference its component package when using this component",
+    "P3": "Nuget Install",
+    "P4": "Use nuget.org to install <a href='https://www.nuget.org/packages?q=BootstrapBlazor.VideoPlayer' target='_blank'><code>BootstrapBlazor.VideoPlayer</code></a> component"
   }
 }

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1566,7 +1566,8 @@
     "OnScreenKeyboardText": "屏幕键盘 OnScreenKeyboard",
     "SignaturePadText": "手写签名 SignaturePad",
     "BluetoothText": "蓝牙和打印 Bluetooth & Printer",
-    "PdfReaderText": "PDF阅读器 PDF Reader"
+    "PdfReaderText": "PDF阅读器 PDF Reader",
+    "VideoPlayerText": "视频播放器 VideoPlayer"
   },
   "BootstrapBlazor.Shared.Pages.Breakpoints": {
     "Heading": "断点",
@@ -4382,7 +4383,8 @@
     "RibbonTab": "选项卡菜单 RibbonTab",
     "PulseButton": "心跳按钮 PulseButton",
     "Bluetooth": "蓝牙和打印 Bluetooth & Printer",
-    "PdfReader": "PDF阅读器 PDF Reader"
+    "PdfReader": "PDF阅读器 PDF Reader",
+    "VideoPlayer": "视频播放器 VideoPlayer"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "H1": "表头分组功能",
@@ -5402,5 +5404,17 @@
     "P2": "本组件依赖于 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'><code>BootstrapBlazor.PdfReader</code></a>，使用本组件时需要引用其组件包",
     "P3": "Nuget 包安装",
     "P4": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.PdfReader' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.PdfReader</code> 组件的安装"
+  },
+  "BootstrapBlazor.Shared.Samples.VideoPlayers": {
+    "Title": "VideoPlayer 视频播放器",
+    "BaseUsageText": "基础用法",
+    "BaseUsageIntro": "",
+    "BaseUsageText2": "切换播放资源",
+    "BaseUsageIntro2": "使用 Reload 方法切换播放资源",
+    "Tips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准.",
+    "P1": "注意事项",
+    "P2": "本组件依赖于 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.VideoPlayer' target='_blank'><code>BootstrapBlazor.VideoPlayer</code></a>，使用本组件时需要引用其组件包",
+    "P3": "Nuget 包安装",
+    "P4": "使用 <a href='https://www.nuget.org/packages?q=BootstrapBlazor.VideoPlayer' target='_blank'>nuget.org</a> 进行 <code>BootstrapBlazor.VideoPlayer</code> 组件的安装"
   }
 }

src/BootstrapBlazor.Shared/Pages/Coms.razor

@@ -112,6 +112,7 @@
             <ComponentCard Text="@Localizer["TreeText"]" Image="Tree.svg" Url="trees"></ComponentCard>
             <ComponentCard Text="@Localizer["TreeViewText"]" Image="Tree.svg" Url="treeviews"></ComponentCard>
             <ComponentCard Text="@Localizer["TransitionText"]" Image="Transition.jpg" Url="transitions"></ComponentCard>
+            <ComponentCard Text="@Localizer["VideoPlayerText"]" Image="VideoPlayer.jpg" Url="videoPlayers"></ComponentCard>
         </ComponentCategory>
 
         <ComponentCategory Text="@Localizer["Text6"]">

src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor

@@ -0,0 +1,85 @@
+@page "/VideoPlayers"
+@namespace BootstrapBlazor.Shared.Samples
+@inject IStringLocalizer<VideoPlayers> Localizer
+
+<h3>@Localizer["Title"]</h3>
+
+<p><b>@Localizer["P1"] ：</b></p>
+
+<p>@((MarkupString)Localizer["P2"].Value)</p>
+
+<p><b>@Localizer["P3"]</b></p>
+
+<p>@((MarkupString)Localizer["P4"].Value)</p>
+
+<div class="code-label">.NET CLI</div>
+<Pre class="no-highlight">dotnet add package BootstrapBlazor.VideoPlayer</Pre>
+
+<div class="code-label">PackageReference</div>
+<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.VideoPlayer" /&gt;</Pre>
+
+<div class="code-label">Package Manager</div>
+<Pre class="no-highlight">Install-Package BootstrapBlazor.VideoPlayer</Pre>
+
+<Tips>
+    <p>@((MarkupString)Localizer["Tips"].Value)</p>
+</Tips>
+<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" />
+        </div>
+        <div class="col-6">
+            <VideoPlayer SourcesType="video/mp4" SourcesUrl="//vjs.zencdn.net/v/oceans.mp4" />
+        </div>
+    </div>
+
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BaseUsageText2"]" Introduction="@Localizer["BaseUsageIntro2"]" Name="Nomal">
+
+    <div class="row g-3">
+        <div class="col-6 col-sm-6 col-md-3 col-xl-auto">
+            <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" />
+        </div>
+        <div class="col-6 col-sm-6 col-md-4 col-xl-auto">
+            <BootstrapInput @bind-Value="@SourcesType" />
+        </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="video1" SourcesType="@SourcesType" SourcesUrl="@SourcesUrl" Width="500" Height="380" />
+
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />
+<br />
+<h5>SourcesType 类型</h5>
+<ol>
+    <li>opus: 'video/ogg'</li>
+    <li>ogv: 'video/ogg'</li>
+    <li>mp4: 'video/mp4'</li>
+    <li>mov: 'video/mp4'</li>
+    <li>m4v: 'video/mp4'</li>
+    <li>mkv: 'video/x-matroska'</li>
+    <li>m4a: 'audio/mp4'</li>
+    <li>mp3: 'audio/mpeg'</li>
+    <li>aac: 'audio/aac'</li>
+    <li>caf: 'audio/x-caf'</li>
+    <li>flac: 'audio/flac'</li>
+    <li>oga: 'audio/ogg'</li>
+    <li>wav: 'audio/wav'</li>
+    <li>m3u8: 'application/x-mpegURL'</li>
+    <li>mpd: 'application/dash+xml'</li>
+    <li>jpg: 'image/jpeg'</li>
+    <li>jpeg: 'image/jpeg'</li>
+    <li>gif: 'image/gif'</li>
+    <li>png: 'image/png'</li>
+    <li>svg: 'image/svg+xml'</li>
+    <li>webp: 'image/webp'</li>
+</ol>

src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs

@@ -0,0 +1,149 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// 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 BootstrapBlazor.Components;
+using BootstrapBlazor.Shared.Common;
+
+namespace BootstrapBlazor.Shared.Samples;
+
+/// <summary>
+/// 
+/// </summary>
+public partial class VideoPlayers
+{
+    private string SourcesType = "video/mp4";
+    private string SourcesUrl = "//vjs.zencdn.net/v/oceans.mp4";
+
+    VideoPlayer? video1;
+
+    List<string> VideoList = new List<string>
+    {
+        "https://rtvelivestream.akamaized.net/rtvesec/la1/la1_main.m3u8",
+        "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8",
+        "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
+        "https://res.cloudinary.com/dannykeane/video/upload/sp_full_hd/q_80:qmax_90,ac_none/v1/dk-memoji-dark.m3u8",
+        "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
+        "https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8",
+        "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
+        "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8",
+        "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",
+
+    };
+
+    List<SelectedItem> Items = new List<SelectedItem>();
+
+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        for (int i = 0; i < VideoList.Count; i++)
+        {
+            Items.Add(new SelectedItem { Text = $"TestVideo{i}", Value = VideoList[i] });
+        }
+        Items.Add(new SelectedItem { Text = "Mp4", Value = "//vjs.zencdn.net/v/oceans.mp4" });
+    }
+
+    private async Task ChangeURL(SelectedItem e)
+    {
+        SourcesUrl = e.Value;
+        SourcesType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL";
+        StateHasChanged();
+        await Apply();
+    }
+
+    private async Task Apply()
+    {
+        await video1.SetPoster("//vjs.zencdn.net/v/oceans.png");
+        await video1.Reload(SourcesUrl, SourcesType);
+    }
+
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+    {
+        // TODO: 移动到数据库中
+        new AttributeItem() {
+            Name = "SourcesUrl",
+            Description = "资源地址",
+            Type = "Stream?",
+            ValueList = "-",
+            DefaultValue = "null"
+        },
+        new AttributeItem() {
+            Name = "SourcesType",
+            Description = "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ",
+            Type = "string?",
+            ValueList = "-",
+            DefaultValue = "application/x-mpegURL"
+        },
+        new AttributeItem() {
+            Name = "Width",
+            Description = "宽度",
+            Type = "int",
+            ValueList = "-",
+            DefaultValue = "300"
+        },
+        new AttributeItem() {
+            Name = "Height",
+            Description = "高度",
+            Type = "int",
+            ValueList = "-",
+            DefaultValue = "200"
+        },
+        new AttributeItem() {
+            Name = "Controls",
+            Description = "显示控制条",
+            Type = "bool",
+            ValueList = "-",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "Autoplay",
+            Description = "自动播放",
+            Type = "bool",
+            ValueList = "-",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "Poster",
+            Description = "设置封面资源,相对或者绝对路径",
+            Type = "bool",
+            ValueList = "string?",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "Option",
+            Description = "播放器选项, 不为空则优先使用播放器选项,否则使用参数构建",
+            Type = "VideoPlayerOption",
+            ValueList = "-",
+            DefaultValue = "null"
+        },
+        new AttributeItem() {
+            Name = "Reload(string? url, string? type)",
+            Description = "切换播放资源",
+            Type = "async Task",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "SetPoster(string? poster)",
+            Description = "设置封面",
+            Type = "async Task",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+        new AttributeItem() {
+            Name = "OnError",
+            Description = "错误回调",
+            Type = "Func<string, Task>??",
+            ValueList = "-",
+            DefaultValue = "-"
+        },
+    };    
+
+}

src/BootstrapBlazor.Shared/docs.json

@@ -77,7 +77,8 @@
     "select-trees": "SelectTrees",
     "bluetooths": "Bluetooths",
     "ribbontabs": "RibbonTabs",
-    "pdfreaders": "PdfReaders"
+    "pdfreaders": "PdfReaders",
+    "videoPlayers": "VideoPlayers"
   },
   "video": {
     "autorefresh": "BV1ap4y1x7Qn?p=8",