Components
Loading preview...
The VideoPlayerPro component is a fully featured, modern video player built with React and TypeScript, designed for a seamless user experience. It supports play, pause, and restart controls, a smoothly updating progress timeline, volume control with an interactive slider, and a settings popover for playback speed and captions. The player also includes fullscreen functionality and a responsive, sleek UI with a semi-transparent backdrop that blends with the video content. Leveraging Framer Motion for smooth animations and Radix UI components for accessibility, this component ensures both functionality and aesthetic appeal, making it ideal for embedding high-quality video experiences in web applications.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/video-player-proimport VideoPlayerAdvanced from "@/components/ui/video-player-pro";
export default function DemoOne() {
return (
<div className="min-h-screen flex items-center justify-center p-4">
<VideoPlayerAdvanced src="https://www.pexels.com/download/video/32186891" />
</div>
);
}