React Embed Player SSR Example

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.

Features

• Server-Side Rendering Support: Fully compatible with SSR frameworks like Next.js
• Video Streaming: High-quality video playback with adaptive bitrate streaming
• DRM Protection: Support for Widevine & Fairplay DRM
• Analytics Integration: Built-in Gumlet Insights for video analytics
• Responsive Design: Mobile-first responsive video player
• Multiple Video Formats: Support for various video formats and streaming protocols
• Customizable Player: Extensive customization options for player appearance and behavior

Installation

npm install @gumlet/react-embed-player

or

yarn add @gumlet/react-embed-player

Usage

Basic Implementation

import React from 'react';
import { GumletPlayer } from '@gumlet/react-embed-player';

function VideoPlayer() {
  return (
    <GumletPlayer
      videoID="64bfb0913ed6e5096d66dc1e"
      title="My Video Title"
      style={{
        height: "500px",
        width: "100%",
        position: "relative"
      }}
      autoplay={false}
      preload={true}
      muted={false}
    />
  );
}

export default VideoPlayer;

Advanced Implementation with SSR

import React, { useRef, useEffect, useState } from 'react';
import { GumletPlayer } from '@gumlet/react-embed-player';

function AdvancedVideoPlayer() {
  const playerRef = useRef(null);
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const handlePlay = () => {
    if (playerRef.current) {
      playerRef.current.play();
    }
  };

  const handlePause = () => {
    if (playerRef.current) {
      playerRef.current.pause();
    }
  };

  if (!isClient) {
    return <div>Loading player...</div>;
  }

  return (
    <div>
      <GumletPlayer
        ref={playerRef}
        videoID="your-video-id"
        title="Advanced Video Player"
        style={{
          height: "500px",
          width: "100%",
          position: "relative"
        }}
        schemaOrgVideoObject={{
          "@context": "https://schema.org",
          "@type": "VideoObject",
          "name": "My Video",
          "description": "Video description",
          "embedUrl": "https://play.gumlet.io/embed/your-video-id"
        }}
        autoplay={false}
        preload={true}
        muted={false}
        onReady={() => console.log('Player ready')}
        onPlay={() => console.log('Video started playing')}
        onPause={() => console.log('Video paused')}
        onEnded={() => console.log('Video ended')}
        onTimeupdate={(data) => console.log('Current time:', data.seconds)}
        onProgress={(data) => console.log('Loading progress:', data.percent)}
      />
      
      <div style={{ marginTop: '20px' }}>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
      </div>
    </div>
  );
}

export default AdvancedVideoPlayer;

Next.js Implementation

import dynamic from 'next/dynamic';

const GumletPlayer = dynamic(
  () => import('@gumlet/react-embed-player').then(mod => mod.GumletPlayer),
  { ssr: false }
);

function NextjsVideoPlayer() {
  return (
    <GumletPlayer
      videoID="your-video-id"
      title="Next.js Video Player"
      style={{
        height: "500px",
        width: "100%",
        position: "relative"
      }}
      autoplay={false}
      preload={true}
    />
  );
}

export default NextjsVideoPlayer;

Props

Methods

The player provides several methods to control playback programmatically:

Playback Control

• play() - Start playing the video
• pause() - Pause the video
• getPaused() - Check if video is paused (returns boolean)

Audio Control

• mute() - Mute the video
• unmute() - Unmute the video
• getMuted() - Check if video is muted (returns boolean)
• setVolume(volume) - Set volume (0-100)
• getVolume() - Get current volume (returns 0-100)

Time Control

• getCurrentTime() - Get current playback time in seconds
• setCurrentTime(seconds) - Seek to specific time
• getDuration() - Get total video duration in seconds

Playback Rate

• setPlaybackRate(rate) - Set playback speed
• getPlaybackRate() - Get current playback rate

📡 Events

The player emits various events that you can listen to:

Playback Events

• onReady - Player is ready for interaction
• onPlay - Video starts playing
• onPause - Video is paused
• onEnded - Video playback finished
• onError - An error occurred

Progress Events

• onProgress - Video loading progress
  JavaScript

  { percent: 0.8 }

• onTimeupdate - Current playback time update
  JavaScript

  { seconds: 10, duration: 40 }

• onSeeked - User seeked to different position
  JavaScript

  { seconds: 10, duration: 50 }

Player State Events

• onFullScreenChange - Fullscreen mode changed
  JavaScript

  { isFullScreen: true }

• onPipChange - Picture-in-picture mode changed
  JavaScript

  { isPIP: true }

• onVolumeChange - Volume level changed
  JavaScript

  { volume: 50 }

• onPlaybackRateChange - Playback rate changed
• onAudioChange - Audio track changed
• onQualityChange - Video quality changed

Custome Analytics

<GumletPlayer
  videoID="your-video-id"
  gm_user_id="user123"
  gm_user_name="John Doe"
  gm_user_email="[email protected]"
  gm_custom_data_1="custom-value"
  ga_tracking_id="GA-XXXXX-X"
  facebook_pixel_id="123456789"
/>

Development

1. Clone the repository

git clone https://github.com/gumlet/react-embed-player-ssr-example.git
cd react-embed-player-ssr-example

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open http://localhost:3000 in your browser

📝 Examples

This repository includes several examples:

• Basic Player - Simple video player implementation
• SSR Player - Server-side rendering compatible player
• Next.js Player - Next.js specific implementation
• Analytics Player - Player with analytics integration
• Custom Controls - Player with custom control implementation

🔧 Troubleshooting

Common Issues

1. Player not loading in SSR environment

   • Use dynamic imports with ssr: false
   • Check for window object availability

2. Video not playing

   • Verify the videoID is correct
   • Check the browser console for errors
   • Ensure proper CORS settings

3. DRM content not working

   • Check browser DRM support
   • Check DRM credentials in DRM settings

Check out the Github repository here - https://github.com/gumlet/react-embed-player-ssr-example