
VideoPlayer
BootstrapBlazor.VideoPlayer
, which needs to reference its component package when using this componentBootstrapBlazor.VideoPlayer
componentdotnet add package BootstrapBlazor.VideoPlayer
<PackageReference Include="BootstrapBlazor.VideoPlayer" Version="7.0.1" />
Install-Package BootstrapBlazor.VideoPlayer
Demo
Use the Reload method to switch playback resources
Demo
Attributes
MineType 类型
- opus: 'video/ogg'
- ogv: 'video/ogg'
- mp4: 'video/mp4'
- mov: 'video/mp4'
- m4v: 'video/mp4'
- mkv: 'video/x-matroska'
- m4a: 'audio/mp4'
- mp3: 'audio/mpeg'
- aac: 'audio/aac'
- caf: 'audio/x-caf'
- flac: 'audio/flac'
- oga: 'audio/ogg'
- wav: 'audio/wav'
- m3u8: 'application/x-mpegURL'
- mpd: 'application/dash+xml'
- jpg: 'image/jpeg'
- jpeg: 'image/jpeg'
- gif: 'image/gif'
- png: 'image/png'
- svg: 'image/svg+xml'
- webp: 'image/webp'
@page "/VideoPlayers"
@namespace BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<VideoPlayers> Localizer
<h3>VideoPlayer</h3>
<PackageTips Name="BootstrapBlazor.VideoPlayer" />
<Tips>
<p>Silent mode enabled by default, this is the way for autoplay follow the modern browser standards.</p>
</Tips>
<DemoBlock Title="Basic usage" Introduction="" Name="Nomal">
<div class="row g-3">
<div class="col-6">
<VideoPlayer MineType="application/x-mpegURL" Url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" />
</div>
<div class="col-6">
<VideoPlayer MineType="video/mp4" Url="//vjs.zencdn.net/v/oceans.mp4" />
</div>
</div>
</DemoBlock>
<DemoBlock Title="Switch playback resources" Introduction="Use the Reload method to switch playback resources" 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="@Url" />
</div>
<div class="col-6 col-sm-6 col-md-4 col-xl-auto">
<BootstrapInput @bind-Value="@MineType" />
</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="Player" MineType="@MineType" Url="@Url" Width="500" Height="380" />
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
<br />
<h5>MineType 类型</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>
// 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/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
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<string> 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<SelectedItem> Items { get; } = new();
/// <summary>
/// OnInitialized 方法
/// </summary>
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);
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new() {
Name = nameof(VideoPlayer.Url),
Description = "资源地址",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = nameof(VideoPlayer.MineType),
Description = "资源类型,video/mp4, application/x-mpegURL, video/ogg .. ",
Type = "string?",
ValueList = "(见页脚)",
DefaultValue = "application/x-mpegURL"
},
new() {
Name = nameof(VideoPlayer.Width),
Description = "宽度",
Type = "int",
ValueList = " — ",
DefaultValue = "300"
},
new() {
Name = nameof(VideoPlayer.Height),
Description = "高度",
Type = "int",
ValueList = " — ",
DefaultValue = "200"
},
new() {
Name = nameof(VideoPlayer.Controls),
Description = "显示控制条",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new() {
Name = nameof(VideoPlayer.Autoplay),
Description = "自动播放",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new() {
Name = nameof(VideoPlayer.Poster),
Description = "设置封面资源,相对或者绝对路径",
Type = "string?",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = "Reload(string url, string type)",
Description = "切换播放资源",
Type = "async Task",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = "SetPoster(string poster)",
Description = "设置封面",
Type = "async Task",
ValueList = " — ",
DefaultValue = " — "
},
new() {
Name = "OnError",
Description = "错误回调",
Type = "Func<string, Task>?",
ValueList = " — ",
DefaultValue = " — "
},
};
}