Basic Usage
Learn how to set up a basic video player with the Shelby Media Player
Overview
In this guide, we will walk you through the process of setting up a basic video player using the Shelby Media Player.
This guide assumes you have a React application set up with TailwindCSS 4 configured.
Getting Started
Installation
To get started, you will need to install the Shelby Media Player package and its peer dependencies.
npm install @shelby-protocol/player react react-dom tailwindcssSetting up TailwindCSS
The Shelby Media Player requires TailwindCSS 4 for styling. You have two options:
Option 1: Quick Setup - Import the provided stylesheet:
@import "@shelby-protocol/player/styles/shadcn.css";Option 2: Manual Setup (Recommended) - For full control over theme variables, see the Styling Guide.
The quick setup imports predefined CSS variables that may conflict with your app's existing theme. Use the manual setup if you have an existing design system.
Using VideoPlayer
Now you can use the VideoPlayer component directly. Here's a basic example:
import { VideoPlayer } from "@shelby-protocol/player";
export function MyVideoPlayer() {
return (
<VideoPlayer
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
title="My Video"
/>
);
}You can also add event handlers to respond to player events:
import { VideoPlayer } from "@shelby-protocol/player";
export function MyVideoPlayer() {
return (
<VideoPlayer
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
title="My Video"
onPlay={() => console.log("Playback started")}
onPause={() => console.log("Playback paused")}
onTimeUpdate={(e) => console.log("Current time:", e.currentTime)}
onDurationChange={(e) => console.log("Duration:", e.duration)}
/>
);
}Configuring Shaka Player
You can customize Shaka Player behavior by passing a configuration object:
import { VideoPlayer } from "@shelby-protocol/player";
export function MyVideoPlayer() {
return (
<VideoPlayer
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
title="My Video"
config={{
abr: {
enabled: true,
defaultBandwidthEstimate: 2000000,
},
streaming: {
bufferingGoal: 30,
},
}}
/>
);
}Adding Autoplay
You can enable autoplay by setting the autoplay prop:
import { VideoPlayer } from "@shelby-protocol/player";
export function MyVideoPlayer() {
return (
<VideoPlayer
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
title="My Video"
autoplay
/>
);
}Note: Autoplay may be blocked by browser policies. The player will automatically mute when autoplay is enabled to comply with browser autoplay policies.
Conclusion
You now have a fully functional video player! The VideoPlayer component includes all standard controls including play/pause, volume, fullscreen, picture-in-picture, time scrubbing, and quality/speed settings.
For more advanced usage, check out the Custom Layout Guide to learn how to build your own custom player interface using the primitive components.