Skip to content

Commit b45b72d

Browse files
akbansaakbansa
authored
Create README.md
1 parent 88546cb commit b45b72d

File tree

1 file changed

+370
-0
lines changed

1 file changed

+370
-0
lines changed

‎README.md‎

Lines changed: 370 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,370 @@
1+
# React Embed Player SSR Example
2+
3+
A comprehensive example demonstrating how to implement Gumlet's React Embed Player with Server-Side Rendering (SSR) support. This repository showcases best practices for integrating video streaming capabilities into React applications with proper SSR handling.
4+
5+
## Features
6+
7+
- **Server-Side Rendering Support**: Fully compatible with SSR frameworks like Next.js
8+
- **Video Streaming**: High-quality video playback with adaptive bitrate streaming
9+
- **DRM Protection**: Support for Widevine & Fairplay DRM
10+
- **Analytics Integration**: Built-in Gumlet Insights for video analytics
11+
- **Responsive Design**: Mobile-first responsive video player
12+
- **Multiple Video Formats**: Support for various video formats and streaming protocols
13+
- **Customizable Player**: Extensive customization options for player appearance and behavior
14+
15+
## Installation
16+
17+
```bash
18+
npm install @gumlet/react-embed-player
19+
```
20+
21+
or
22+
23+
```bash
24+
yarn add @gumlet/react-embed-player
25+
```
26+
27+
## Usage
28+
29+
### Basic Implementation
30+
31+
```jsx
32+
import React from 'react';
33+
import { GumletPlayer } from '@gumlet/react-embed-player';
34+
35+
function VideoPlayer() {
36+
return (
37+
<GumletPlayer
38+
videoID="64bfb0913ed6e5096d66dc1e"
39+
title="My Video Title"
40+
style={{
41+
height: "500px",
42+
width: "100%",
43+
position: "relative"
44+
}}
45+
autoplay={false}
46+
preload={true}
47+
muted={false}
48+
/>
49+
);
50+
}
51+
52+
export default VideoPlayer;
53+
```
54+
55+
### Advanced Implementation with SSR
56+
57+
```jsx
58+
import React, { useRef, useEffect, useState } from 'react';
59+
import { GumletPlayer } from '@gumlet/react-embed-player';
60+
61+
function AdvancedVideoPlayer() {
62+
const playerRef = useRef(null);
63+
const [isClient, setIsClient] = useState(false);
64+
65+
useEffect(() => {
66+
setIsClient(true);
67+
}, []);
68+
69+
const handlePlay = () => {
70+
if (playerRef.current) {
71+
playerRef.current.play();
72+
}
73+
};
74+
75+
const handlePause = () => {
76+
if (playerRef.current) {
77+
playerRef.current.pause();
78+
}
79+
};
80+
81+
if (!isClient) {
82+
return <div>Loading player...</div>;
83+
}
84+
85+
return (
86+
<div>
87+
<GumletPlayer
88+
ref={playerRef}
89+
videoID="your-video-id"
90+
title="Advanced Video Player"
91+
style={{
92+
height: "500px",
93+
width: "100%",
94+
position: "relative"
95+
}}
96+
schemaOrgVideoObject={{
97+
"@context": "https://schema.org",
98+
"@type": "VideoObject",
99+
"name": "My Video",
100+
"description": "Video description",
101+
"embedUrl": "https://play.gumlet.io/embed/your-video-id"
102+
}}
103+
autoplay={false}
104+
preload={true}
105+
muted={false}
106+
onReady={() => console.log('Player ready')}
107+
onPlay={() => console.log('Video started playing')}
108+
onPause={() => console.log('Video paused')}
109+
onEnded={() => console.log('Video ended')}
110+
onTimeupdate={(data) => console.log('Current time:', data.seconds)}
111+
onProgress={(data) => console.log('Loading progress:', data.percent)}
112+
/>
113+
114+
<div style={{ marginTop: '20px' }}>
115+
<button onClick={handlePlay}>Play</button>
116+
<button onClick={handlePause}>Pause</button>
117+
</div>
118+
</div>
119+
);
120+
}
121+
122+
export default AdvancedVideoPlayer;
123+
```
124+
125+
### Next.js Implementation
126+
127+
```jsx
128+
import dynamic from 'next/dynamic';
129+
130+
const GumletPlayer = dynamic(
131+
() => import('@gumlet/react-embed-player').then(mod => mod.GumletPlayer),
132+
{ ssr: false }
133+
);
134+
135+
function NextjsVideoPlayer() {
136+
return (
137+
<GumletPlayer
138+
videoID="your-video-id"
139+
title="Next.js Video Player"
140+
style={{
141+
height: "500px",
142+
width: "100%",
143+
position: "relative"
144+
}}
145+
autoplay={false}
146+
preload={true}
147+
/>
148+
);
149+
}
150+
151+
export default NextjsVideoPlayer;
152+
```
153+
154+
## Props
155+
156+
| Prop | Type | Description | Default |
157+
|------|------|-------------|---------|
158+
| `videoID` | `string` | **Required** - Video ID generated after processing on Gumlet | - |
159+
| `title` | `string` | Title of the iframe | `"Gumlet video player"` |
160+
| `style` | `object` | CSS styles for the iframe container | `{padding:"56.25% 0 0 0", position:"relative"}` |
161+
| `schemaOrgVideoObject` | `object` | Schema.org structured data object | `{}` |
162+
| `autoplay` | `boolean` | Should the video autoplay | Collection default |
163+
| `preload` | `boolean` | Should the video preload | Collection default |
164+
| `muted` | `boolean` | Should the video be muted | Collection default |
165+
| `loop` | `boolean` | Should the video loop | Collection default |
166+
| `thumbnail` | `string` | URL encoded thumbnail/poster URL | Asset default |
167+
| `drm_token` | `string` | DRM token for protected content | `null` |
168+
| `expires` | `number` | Token expiry time (epoch millis) | `null` |
169+
| `vast_tag_url` | `string` | URL encoded VAST tag URL for ads | `null` |
170+
| `start_high_res` | `boolean` | Start in highest resolution | `false` |
171+
| `disable_seek` | `boolean` | Disable seek functionality | `false` |
172+
| `disable_player_controls` | `boolean` | Hide all player controls | `false` |
173+
| `watermark_text` | `string` | Watermark text overlay | `null` |
174+
| `facebook_pixel_id` | `string` | Facebook Pixel ID for analytics | `null` |
175+
| `ga_tracking_id` | `string` | Google Analytics tracking ID | `null` |
176+
| `gm_user_id` | `string` | User ID for Gumlet Insights | `null` |
177+
| `gm_user_name` | `string` | User name for Gumlet Insights | `null` |
178+
| `gm_user_email` | `string` | User email for Gumlet Insights | `null` |
179+
| `gm_custom_data_1` | `string` | Custom data for Gumlet Insights | `null` |
180+
| `t` | `number` | Start time in seconds | `null` |
181+
182+
## Methods
183+
184+
The player provides several methods to control playback programmatically:
185+
186+
### Playback Control
187+
- `play()` - Start playing the video
188+
- `pause()` - Pause the video
189+
- `getPaused()` - Check if video is paused (returns boolean)
190+
191+
### Audio Control
192+
- `mute()` - Mute the video
193+
- `unmute()` - Unmute the video
194+
- `getMuted()` - Check if video is muted (returns boolean)
195+
- `setVolume(volume)` - Set volume (0-100)
196+
- `getVolume()` - Get current volume (returns 0-100)
197+
198+
### Time Control
199+
- `getCurrentTime()` - Get current playback time in seconds
200+
- `setCurrentTime(seconds)` - Seek to specific time
201+
- `getDuration()` - Get total video duration in seconds
202+
203+
### Playback Rate
204+
- `setPlaybackRate(rate)` - Set playback speed
205+
- `getPlaybackRate()` - Get current playback rate
206+
207+
## 📡 Events
208+
209+
The player emits various events that you can listen to:
210+
211+
### Playback Events
212+
- `onReady` - Player is ready for interaction
213+
- `onPlay` - Video starts playing
214+
- `onPause` - Video is paused
215+
- `onEnded` - Video playback finished
216+
- `onError` - An error occurred
217+
218+
### Progress Events
219+
- `onProgress` - Video loading progress
220+
```javascript
221+
{ percent: 0.8 }
222+
```
223+
- `onTimeupdate` - Current playback time update
224+
```javascript
225+
{ seconds: 10, duration: 40 }
226+
```
227+
- `onSeeked` - User seeked to different position
228+
```javascript
229+
{ seconds: 10, duration: 50 }
230+
```
231+
232+
### Player State Events
233+
- `onFullScreenChange` - Fullscreen mode changed
234+
```javascript
235+
{ isFullScreen: true }
236+
```
237+
- `onPipChange` - Picture-in-picture mode changed
238+
```javascript
239+
{ isPIP: true }
240+
```
241+
- `onVolumeChange` - Volume level changed
242+
```javascript
243+
{ volume: 50 }
244+
```
245+
- `onPlaybackRateChange` - Playback rate changed
246+
- `onAudioChange` - Audio track changed
247+
- `onQualityChange` - Video quality changed
248+
249+
## Custome Analytics
250+
251+
```jsx
252+
<GumletPlayer
253+
videoID="your-video-id"
254+
gm_user_id="user123"
255+
gm_user_name="John Doe"
256+
gm_user_email="[email protected]"
257+
gm_custom_data_1="custom-value"
258+
ga_tracking_id="GA-XXXXX-X"
259+
facebook_pixel_id="123456789"
260+
/>
261+
```
262+
263+
## Development
264+
265+
1. Clone the repository
266+
```bash
267+
git clone https://github.com/gumlet/react-embed-player-ssr-example.git
268+
cd react-embed-player-ssr-example
269+
```
270+
271+
2. Install dependencies
272+
```bash
273+
npm install
274+
```
275+
276+
3. Start the development server
277+
```bash
278+
npm run dev
279+
```
280+
281+
4. Open [http://localhost:3000](http://localhost:3000) in your browser
282+
283+
## 📝 Examples
284+
285+
This repository includes several examples:
286+
287+
- **Basic Player** - Simple video player implementation
288+
- **SSR Player** - Server-side rendering compatible player
289+
- **Next.js Player** - Next.js specific implementation
290+
- **Analytics Player** - Player with analytics integration
291+
- **Custom Controls** - Player with custom control implementation
292+
293+
## 🔧 Troubleshooting
294+
295+
### Common Issues
296+
297+
1. **Player not loading in SSR environment**
298+
- Use dynamic imports with `ssr: false`
299+
- Check for `window` object availability
300+
301+
2. **Video not playing**
302+
- Verify the `videoID` is correct
303+
- Check browser console for errors
304+
- Ensure proper CORS settings
305+
306+
3. **DRM content not working**
307+
- Verify DRM token is valid and not expired
308+
- Check browser DRM support
309+
310+
## 🤝 Contributing
311+
312+
We welcome contributions to improve this example repository! Here's how you can help:
313+
314+
### Ways to Contribute
315+
316+
- 🐛 **Report bugs** - Found an issue? Please create a detailed bug report
317+
- 💡 **Suggest features** - Have ideas for improvements? We'd love to hear them
318+
- 📖 **Improve documentation** - Help make our docs clearer and more comprehensive
319+
- 🔧 **Submit code changes** - Fix bugs or add new features
320+
- 📝 **Add examples** - Share your implementation patterns with the community
321+
322+
### How to Contribute
323+
324+
1. **Fork the repository**
325+
2. **Create a feature branch**
326+
```bash
327+
git checkout -b feature/your-feature-name
328+
```
329+
3. **Make your changes**
330+
4. **Add tests** (if applicable)
331+
5. **Commit your changes**
332+
```bash
333+
git commit -m "Add your descriptive commit message"
334+
```
335+
6. **Push to your branch**
336+
```bash
337+
git push origin feature/your-feature-name
338+
```
339+
7. **Open a Pull Request**
340+
341+
### Pull Request Guidelines
342+
343+
- Provide a clear description of the changes
344+
- Include screenshots for UI changes
345+
- Ensure all tests pass
346+
- Follow the existing code style
347+
- Update documentation if needed
348+
349+
### Development Setup
350+
351+
```bash
352+
# Clone your fork
353+
git clone https://github.com/your-username/react-embed-player-ssr-example.git
354+
355+
# Install dependencies
356+
npm install
357+
358+
# Start development server
359+
npm run dev
360+
```
361+
362+
## Support
363+
364+
- 📧 Email: [email protected]
365+
- 📖 Documentation: [Gumlet Docs](https://docs.gumlet.com/)
366+
- 🐛 Issues: [GitHub Issues](https://github.com/gumlet/react-embed-player-ssr-example/issues)
367+
368+
---
369+
370+
Made with ❤️ by [Gumlet](https://github.com/gumlet)

0 commit comments

Comments
 (0)