Media Player

Visual HTML5 video player embedded with clean glassmorphic control overlays, volume sliders, and dynamic play buttons.

Preview & Interactive Laboratory

Live Video Sandbox

Usage & Implementation

import { MediaPlayer } from "@/components/ui/media-player"

<MediaPlayer 
  src="https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-529-large.mp4" 
  poster="/images/media/forest.jpg" 
  className="max-w-xl"
/>

React / Tailwind

Granular Customization

Player Box

The core relative wrapper around the native HTML5 video frame.

className={`className`}

Poster Image

Standard preview poster shown before user clicks play.

className={`poster`}

API Reference (Props)

Prop	Type	Default	Description
src	string	undefined	HTML5 video source url link.
poster	string	undefined	Fallback thumbnail poster image source.