Components
Loading preview...
Here is Video Player component
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/video-player'use client';
import {
VideoPlayer,
VideoPlayerContent,
VideoPlayerControlBar,
VideoPlayerMuteButton,
VideoPlayerPlayButton,
VideoPlayerSeekBackwardButton,
VideoPlayerSeekForwardButton,
VideoPlayerTimeDisplay,
VideoPlayerTimeRange,
VideoPlayerVolumeRange,
} from '@/components/ui/video-player';
const Example = () => (
<VideoPlayer className="overflow-hidden rounded-lg border">
<VideoPlayerContent
crossOrigin=""
muted
preload="auto"
slot="media"
src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
/>
<VideoPlayerControlBar>
<VideoPlayerPlayButton />
<VideoPlayerSeekBackwardButton />
<VideoPlayerSeekForwardButton />
<VideoPlayerTimeRange />
<VideoPlayerTimeDisplay showDuration />
<VideoPlayerMuteButton />
<VideoPlayerVolumeRange />
</VideoPlayerControlBar>
</VideoPlayer>
);
export default Example;