Next.js / React JS

React component for Gumlet embed player with SSR support

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

📡 Event Callbacks

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

  { percent: 0.8 }
  

  javascript
• onTimeupdate - Current playback time update

  { seconds: 10, duration: 40 }
  

  javascript
• onSeeked - User seeked to different position

  { seconds: 10, duration: 50 }
  

  javascript

Player State Events

• onFullScreenChange - Fullscreen mode changed

  { isFullScreen: true }
  

  javascript
• onPipChange - Picture-in-picture mode changed

  { isPIP: true }
  

  javascript
• onVolumeChange - Volume level changed

  { volume: 50 }
  

  javascript
• 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="john@example.com"
  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

DRM Playback

Please note, this package automatically handles DRM playback and there is no extra configuration required on the player side. If you are facing any issues, please contact our support.