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):

<!-- HLS.js (only needed for live/HLS streams) -->
<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 {
	--cloudcomponents-video-player-accent-color: #4c9aff !important;
	--cloudcomponents-video-player-rounded-corder: 4px !important;
}

Demo

Run the CloudComponents.VideoPlayer.Demo project:

dotnet run --project CloudComponents.VideoPlayer.Demo

Angry Monkey Cloud

This project is part of the Angry Monkey Cloud open-source ecosystem. Follow the shared AI development instructions and browse the project catalog and GitHub organization.

Back to CloudComponents overview