AngryMonkey.CloudComponents.VideoPlayer 4.2.1

.NET 10.0

dotnet add package AngryMonkey.CloudComponents.VideoPlayer --version 4.2.1

NuGet\Install-Package AngryMonkey.CloudComponents.VideoPlayer -Version 4.2.1

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="AngryMonkey.CloudComponents.VideoPlayer" Version="4.2.1" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="AngryMonkey.CloudComponents.VideoPlayer" Version="4.2.1" />
                    

                            Directory.Packages.props

<PackageReference Include="AngryMonkey.CloudComponents.VideoPlayer" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add AngryMonkey.CloudComponents.VideoPlayer --version 4.2.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: AngryMonkey.CloudComponents.VideoPlayer, 4.2.1"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package AngryMonkey.CloudComponents.VideoPlayer@4.2.1

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=AngryMonkey.CloudComponents.VideoPlayer&version=4.2.1
                    

                            Install as a Cake Addin

#tool nuget:?package=AngryMonkey.CloudComponents.VideoPlayer&version=4.2.1
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

CloudComponents.VideoPlayer

A standalone Blazor component library providing a fully-featured HTML5 video player with HLS live-stream support, casting, and a rich controls UI.

Features

MP4 & HLS playback — native video for standard files; HLS.js for adaptive live streams.
Full controls — play/pause/stop, seek, volume, mute, playback speed, loop.
Fullscreen — enter/exit fullscreen with keyboard shortcut and button.
Settings menu — playback speed selector, loop toggle, video info panel.
Casting — Chromecast support via the built-in cast bridge.
Progress bar — interactive seek with buffered-range display.
Volume bar — slider with mute shortcut.
Aspect ratio — optional reserved-aspect-ratio mode.
Events — exposes TimeUpdate, VideoEvents, and full VideoPlayerMetadata state.

Installation

dotnet add package AngryMonkey.CloudComponents.VideoPlayer

Setup

Add the script references to your wwwroot/index.html (Blazor WASM) or _Host.cshtml (Blazor Server):


<script src="_content/CloudComponents.VideoPlayer/hls.js"></script>

@using CloudComponents.VideoPlayer

Usage

Basic MP4 player

@code {
	private VideoPlayerMetadata Metadata = new()
	{
		Title = "My Video",
		VideoUrl = "https://example.com/video.mp4",
		EnableControls = true,
		ShowProgressBar = true,
		ShowSettings = true,
		Volume = 1.0
	};
}

<VideoPlayer Metadata="Metadata" />

HLS live stream

@code {
	private VideoPlayerMetadata Metadata = new()
	{
		Title = "Live Channel",
		VideoUrl = "https://example.com/stream.m3u8",
		IsLive = true,
		EnableControls = true
	};
}

<VideoPlayer Metadata="Metadata" />

With child content (header overlay)

<VideoPlayer Metadata="Metadata">
	<div class="my-overlay">Episode 1 — Introduction</div>
</VideoPlayer>

`VideoPlayerMetadata` properties

Property	Type	Default	Description
`VideoUrl`	`string?`	`null`	URL of the video or HLS `.m3u8` playlist
`Title`	`string?`	`null`	Display title shown in the settings panel
`IsLive`	`bool`	`false`	Treat the source as a live stream (hides progress bar)
`EnableControls`	`bool`	`true`	Show the control bar
`ShowProgressBar`	`bool`	`true`	Show the seek/progress bar
`ShowSettings`	`bool`	`true`	Show the settings menu button
`ShowStopButton`	`bool`	`false`	Show a stop button alongside play/pause
`Volume`	`double`	`1.0`	Initial volume (0.0 – 1.0)
`Autoplay`	`bool`	`false`	Start playback automatically
`Loop`	`bool`	`false`	Loop the video when it ends
`ReserveAspectRatio`	`bool`	`false`	Maintain 16:9 aspect ratio when controls are hidden

Customization

Override CSS variables for accent color and border radius:

:root {
	--amc-videoplayer-accentColor: #4c9aff !important;
	--amc-videoplayer-roundedCorder: 4px !important;
}

Demo

Run the CloudComponents.VideoPlayer.Demo project:

dotnet run --project CloudComponents.VideoPlayer.Demo