MediaLiquid Glass
Media Player
Glass audio/video player with CC, quality selector, seek, and volume. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add media-playerVideo + CC + quality
HTML5 video with captions menu, multi-quality sources, seek, volume, and fullscreen.
Audio player
Compact audio shell with title, seek bar, and volume.
About this component
Media Player is part of Media. Glass audio/video player with CC, quality selector, seek, and volume.
Install with npx @intellihelper/cli@latest add media-player. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Media Player
Use when
- Use Media Player when glass audio/video player with CC, quality selector, seek, and volume.
- Image lightboxes, audio/video playback, or in-browser crop/filter workflows.
- AI chat attachments, galleries, podcasts, and avatar/product image editing.
Avoid when
- Server-side image pipelines that should not run in the browser.
- Complex NLE timelines — these are product UI primitives, not a video suite.
Accessibility notes
- Lightbox and player controls need accessible names and keyboard support.
- Provide captions/transcripts for meaningful audio and video content.
- Do not rely on color-only filter previews for critical information.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use File Upload for intake, Image Preview for viewing, Image Editor before submit.
- Keep Media Player chrome on the control layer; avoid nesting saturated content cards inside the player shell.