P11 Blazor UI Library – Bootstrap 5.3 Components

P11MediaPlayerNative Component

The P11MediaPlayerNative component provides a unified wrapper for native HTML <video> and <audio> elements. It allows developers to embed media content with essential controls and playback options, relying purely on native browser capabilities and custom CSS for styling.

Note: This component always renders with native browser controls enabled. Be aware that browser policies often restrict autoplay for unmuted media.

Examples

This component is a pure wrapper for the native HTML <audio> and <video> elements. All controls and functionality are provided entirely by the browser; no JavaScript interop is used.

Simple Video Player

Audio Player

Video Player with Multiple Sources

This example uses a List<MediaSource> to provide multiple formats for broader browser compatibility.

Video Player with Poster and Loop

Additional native attributes like poster can be passed directly to the component.

Implementation Details

<h2 class="mb-3">Examples</h2>
<p>
    This component is a pure wrapper for the native HTML <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements. All controls and functionality are provided entirely by the browser; no JavaScript interop is used.
</p>

<h4 class="mt-4">Simple Video Player</h4>
<P11MediaPlayerNative MediaType="MediaType.Video"
                      Src="https://www.w3schools.com/html/mov_bbb.mp4"
                      Autoplay="false"
                      Loop="false" />

<h4 class="mt-5">Audio Player</h4>
<P11MediaPlayerNative MediaType="MediaType.Audio"
                      Src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
                      Autoplay="false"
                      Loop="true"
                      Muted="false" />

<h4 class="mt-5">Video Player with Multiple Sources</h4>
<p>This example uses a <code>List&lt;MediaSource&gt;</code> to provide multiple formats for broader browser compatibility.</p>
<P11MediaPlayerNative MediaType="MediaType.Video"
                      Autoplay="false"
                      Sources="VideoSourcesList" />

<h4 class="mt-5">Video Player with Poster and Loop</h4>
<p>Additional native attributes like <code>poster</code> can be passed directly to the component.</p>
<P11MediaPlayerNative MediaType="MediaType.Video"
                      Src="https://www.w3schools.com/html/mov_bbb.mp4"
                      Autoplay="false"
                      Loop="true"
                      poster="https://www.w3schools.com/html/img_logo.gif" />

@code {
    public List<MediaSource> VideoSourcesList { get; set; } = new List<MediaSource>();

    protected override void OnInitialized()
    {
        VideoSourcesList.Add(new MediaSource { Src = "https://www.w3schools.com/html/mov_bbb.mp4", Type = "video/mp4" });
        VideoSourcesList.Add(new MediaSource { Src = "https://www.w3schools.com/html/mov_bbb.ogg", Type = "video/ogg" });

        base.OnInitialized();
    }
}

Component API

Parameter	Type	Default	Description
`MediaType` Required	`MediaType`	-	Gets or sets the type of media to play (Video or Audio).
`Sources`	`List<MediaSource>`	`new List<MediaSource>()`	Gets or sets the sources for the media element. Use this for multiple formats for broader browser compatibility. This list takes precedence over the single `Src` parameter.
`Src`	`string?`	`null`	Gets or sets the default source for a single media file. Ignored if the `Sources` list is populated.
`Autoplay`	`bool`	`false`	Gets or sets a value indicating whether the media should start playing automatically. Beware: Browsers often block autoplay unless muted.
`Loop`	`bool`	`false`	Gets or sets a value indicating whether the media should loop.
`Muted`	`bool`	`false`	Gets or sets a value indicating whether the media should be muted by default.
`Preload`	`PreloadOption`	`PreloadOption.Auto`	Gets or sets how the media should be preloaded by the browser.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures all unmatched attributes to pass directly to the underlying media element. Example: `P11MediaPlayerNative class="my-video" poster="image.jpg"`