Learn how to customize the video player for different use cases. Each example shows a different configuration preset and the corresponding code.
Full-featured player with the standard control set
Custom behavior and specific controls
Step-by-step guide to implement configurable video players in your Next.js app
// app/layout.tsx or your root component
import { PlayerConfigProvider, PlayerPresets } from '@madraka/nextjs-videoplayer';
export default function RootLayout({ children }) {
return (
<PlayerConfigProvider
defaultConfig={PlayerPresets.default}
storageKey="nextjs-videoplayer-showcase-config-v2"
>
{children}
</PlayerConfigProvider>
);
}// In your component
import { ConfigurableVideoPlayer } from '@madraka/nextjs-videoplayer';
function MyVideoComponent() {
return (
<ConfigurableVideoPlayer
src="https://example.com/video.mp4"
poster="https://example.com/poster.jpg"
// Optional: Override global config for this instance
configOverride={{
controls: {
visibility: {
playbackRate: false, // Hide playback rate for this video
},
},
}}
/>
);
}