diff --git a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor b/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor deleted file mode 100644 index cf2893481d6d7286e5a3e310fc88304f77f16fd0..0000000000000000000000000000000000000000 --- a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersChangeURL.razor +++ /dev/null @@ -1,66 +0,0 @@ -
-
- -
-
- -
-
- -
-
- -
-
-
- - -@code { - private string MineType = "video/mp4"; - private string Url = "//vjs.zencdn.net/v/oceans.mp4"; - - [NotNull] - private VideoPlayer? Player { get; set; } - - private List VideoList { get; } = new() - { - "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" - }; - - private List Items { get; } = new(); - - /// - /// OnInitialized 方法 - /// - protected override void OnInitialized() - { - base.OnInitialized(); - for (var 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) - { - Url = e.Value; - MineType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL"; - StateHasChanged(); - await Apply(); - } - - private async Task Apply() - { - await Player.SetPoster("//vjs.zencdn.net/v/oceans.png"); - await Player.Reload(Url, MineType); - } -} diff --git a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor b/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor deleted file mode 100644 index 63045e929580b2127fe7467f1f67e01ddd57ed0b..0000000000000000000000000000000000000000 --- a/src/BootstrapBlazor.Shared/Demos/VideoPlayers/VideoPlayersNomal.razor +++ /dev/null @@ -1,8 +0,0 @@ -
-
- -
-
- -
-
diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json index 7bc4b118de2df2557b852b7506fecf3ba8cfb699..6eba80353e2d56d3c47f32526801c1928fe7feea 100644 --- a/src/BootstrapBlazor.Shared/Locales/en.json +++ b/src/BootstrapBlazor.Shared/Locales/en.json @@ -5876,12 +5876,24 @@ "PdfReaderCompatibilityModeTips": "- Chrome < 97 automatically uses version 2.4.456
- Chrome < 109 automatically uses version 2.6.347
- Note: ReadOnly and Watermark cannot be used in these two compatibility modes" }, "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." + "VideoPlayersTitle": "VideoPlayer", + "VideoPlayersNomalTitle": "Basic usage", + "VideoPlayersNomalIntro": "", + "VideoPlayersChangeURLTitle": "Switch playback resources", + "VideoPlayersChangeURLIntro": "Use the Reload method to switch playback resources", + "VideoPlayersTips": "Silent mode enabled by default, this is the way for autoplay follow the modern browser standards.", + "MineType": "MineType", + "ResourceUrl": "Resource Address", + "MineTypeDesc": "Resource types", + "ValueList": "(see footer)", + "Width": "Width", + "Height": "Height", + "ShowControls": "Displays the control bar", + "AutoPaly": "Autoplay", + "Poster": "Set the cover resource, relative or absolute path", + "SwitchResource": "Toggle playback resources", + "SetPoster": "Set the cover", + "OnError": "Error callback" }, "BootstrapBlazor.Shared.Components.PackageTips": { "Tips": "
Precautions
This component relies on {0}, which needs to reference its component package when using this component
Nuget Install
Use nuget.org to install {0} component
" diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json index d0f92e2a83afc2a55fd22957b439cb37e302e36b..ada3b161253a98fd6710881397afb9d91221ade0 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh.json +++ b/src/BootstrapBlazor.Shared/Locales/zh.json @@ -5897,12 +5897,24 @@ "PdfReaderCompatibilityModeTips": "- Chrome < 97 自动使用 2.4.456 版本
- Chrome < 109 自动使用 2.6.347 版本
- 注:ReadOnly 和 Watermark 在这两种兼容模式下不能使用" }, "BootstrapBlazor.Shared.Samples.VideoPlayers": { - "Title": "VideoPlayer 视频播放器", - "BaseUsageText": "基础用法", - "BaseUsageIntro": "", - "BaseUsageText2": "切换播放资源", - "BaseUsageIntro2": "使用 Reload 方法切换播放资源", - "Tips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准." + "VideoPlayersTitle": "VideoPlayer 视频播放器", + "VideoPlayersNomalTitle": "基础用法", + "VideoPlayersNomalIntro": "", + "VideoPlayersChangeURLTitle": "切换播放资源", + "VideoPlayersChangeURLIntro": "使用 Reload 方法切换播放资源", + "VideoPlayersTips": "默认启用静音模式,只有这样自动播放功能才符合现代浏览器标准.", + "MineType": "MineType 类型", + "ResourceUrl": "资源地址", + "MineTypeDesc": "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ", + "ValueList": "(见页脚)", + "Width": "宽度", + "Height": "高度", + "ShowControls": "显示控制条", + "AutoPaly": "自动播放", + "Poster": "设置封面资源,相对或者绝对路径", + "SwitchResource": "切换播放资源", + "SetPoster": "设置封面", + "OnError": "错误回调" }, "BootstrapBlazor.Shared.Components.PackageTips": { "Tips": "
注意事项 ：
本组件依赖于 {0}，使用本组件时需要引用其组件包
Nuget 包安装
使用 nuget.org 进行 {0} 组件的安装
" diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor index 33bf878630ec44d6f83653d38439f3fa89e22bd5..c29fa9d8f3fc14a9eefe4599fc345479e0ee0902 100644 --- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor +++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor @@ -6,24 +6,46 @@ - +

@((MarkupString)Localizer["VideoPlayersTips"].Value)

 + Name="Nomal"> +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + Name="ChangeURL"> +
+
+ +
+
+ +
+

-
MineType 类型
+
@Localizer["MineType"]
  1. opus: 'video/ogg'
  2. ogv: 'video/ogg'
    3. diff --git a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs index f1b3e0bcfeb9338f67de3bc6772c799bb0b6f805..5b02a46adf1613d4c7f6b4fa896d3dd377f5d986 100644 --- a/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/VideoPlayers.razor.cs @@ -9,6 +9,54 @@ namespace BootstrapBlazor.Shared.Samples; /// public partial class VideoPlayers { + private string MineType = "video/mp4"; + private string Url = "//vjs.zencdn.net/v/oceans.mp4"; + + [NotNull] + private VideoPlayer? Player { get; set; } + + private List VideoList { get; } = new() + { + "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" + }; + + private List Items { get; } = new(); + + /// + /// OnInitialized 方法 + /// + protected override void OnInitialized() + { + base.OnInitialized(); + for (var 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) + { + Url = e.Value; + MineType = e.Value.EndsWith("mp4") ? "video/mp4" : "application/x-mpegURL"; + StateHasChanged(); + await Apply(); + } + + private async Task Apply() + { + await Player.SetPoster("//vjs.zencdn.net/v/oceans.png"); + await Player.Reload(Url, MineType); + } + /// /// 获得属性方法 /// @@ -18,70 +66,70 @@ public partial class VideoPlayers // TODO: 移动到数据库中 new() { Name = nameof(VideoPlayer.Url), - Description = "资源地址", + Description = Localizer["ResourceUrl"], Type = "string", ValueList = " — ", DefaultValue = " — " }, new() { Name = nameof(VideoPlayer.MineType), - Description = "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ", + Description = Localizer["MineTypeDesc"], Type = "string?", - ValueList = "(见页脚)", + ValueList = Localizer["ValueList"], DefaultValue = "application/x-mpegURL" }, new() { Name = nameof(VideoPlayer.Width), - Description = "宽度", + Description = Localizer["Width"], Type = "int", ValueList = " — ", DefaultValue = "300" }, new() { Name = nameof(VideoPlayer.Height), - Description = "高度", + Description = Localizer["Height"], Type = "int", ValueList = " — ", DefaultValue = "200" }, new() { Name = nameof(VideoPlayer.Controls), - Description = "显示控制条", + Description = Localizer["ShowBar"], Type = "bool", ValueList = "true|false", DefaultValue = "true" }, new() { Name = nameof(VideoPlayer.Autoplay), - Description = "自动播放", + Description = Localizer["AutoPaly"], Type = "bool", ValueList = "true|false", DefaultValue = "true" }, new() { Name = nameof(VideoPlayer.Poster), - Description = "设置封面资源,相对或者绝对路径", + Description = Localizer["Poster"], Type = "string?", ValueList = " — ", DefaultValue = " — " }, new() { Name = "Reload(string url, string type)", - Description = "切换播放资源", + Description = Localizer["SwitchResource"], Type = "async Task", ValueList = " — ", DefaultValue = " — " }, new() { Name = "SetPoster(string poster)", - Description = "设置封面", + Description = Localizer["SetPoster"], Type = "async Task", ValueList = " — ", DefaultValue = " — " }, new() { Name = "OnError", - Description = "错误回调", + Description = Localizer["OnError"], Type = "Func?", ValueList = " — ", DefaultValue = " — "