Developers
Start typing to search…

Embed Gumlet Video Player with React JS

Guide to set up Gumlet Videos with GumletReactPlayer on ReactJS

Gumlet React Player is a player to play Gumlet-hosted videos on React web applications. It can play both HLS and DASH streams and supports DRM.

To keep the scope of this document limited, we expect you have already set up a React JS development environment and have an application running.

Step 1: Install the react-embed-player package

npm i @gumlet/react-embed-player

Step 2: Add the GumletPlayer

For the simplicity of this document, we are making the changes in App.js itself, and our web application will only have a video player in it.

import React, { Component } from 'react'

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

class Example extends Component {
  render() {
    return <GumletPlayer
      videoID="64bfb0913ed6e5096d66dc1e"
      title="Gumlet Player Example"
      style={{height: "100vh", width: "100vw", position:"relative"}}
      schemaOrgVideoObject={{"@context":"https://schema.org","@type":"VideoObject","name":"Gumlet","description":"","embedUrl":"https://play.gumlet.io/embed/64bfb0913ed6e5096d66dc1e"}}
      autoplay={false}
      preload={false}
      muted={true}
    />
  }
}

...

Example

import React, { useRef } from 'react';

import {GumletPlayer} from 'react-embed-player'
import 'react-embed-player/dist/index.css'

const App = () => {
  const playerRef = useRef(null);
  
  const play = () => {
    if(playerRef.current) playerRef.current.play();
  }
  const pause = () => {
    if(playerRef.current) playerRef.current.pause();
  }
  const mute = () => {
    if(playerRef.current) playerRef.current.mute();
  }
  const unmute = () => {
    if(playerRef.current) playerRef.current.unmute();
  }
  const setVolume = (volume) => {
    if(playerRef.current) playerRef.current.setVolume(volume);
  }
  const setCurrentTime = (time) => {
    if(playerRef.current) playerRef.current.setCurrentTime(time);
  }
  const setPlaybackRate = (rate) => {
    if(playerRef.current) playerRef.current.setPlaybackRate(rate);
  }
  const getVolume = async () => {
    if(playerRef.current) window.alert(await playerRef.current.getVolume());
  }
  const getDuration = async () => {
    if(playerRef.current) window.alert(await playerRef.current.getDuration());
  }
  const getCurrentTime = async () => {
    if(playerRef.current) window.alert(await playerRef.current.getCurrentTime());
  }
  const getPlaybackRate = async () => {
    if(playerRef.current) window.alert(await playerRef.current.getPlaybackRate());
  }
  

  return <>
    <div style={{padding: "10px"}}>
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={mute}>Mute</button>
      <button onClick={unmute}>Unmute</button>
      <button onClick={() => setVolume(50)}>Set volume to 50%</button>
      <button onClick={() => setCurrentTime(2)}>Set time to 2 seconds</button>
      <button onClick={() => setPlaybackRate(2)}>Set playback rate to 2x</button>
      <button onClick={getVolume}>Get volume</button>
      <button onClick={getDuration}>Get duration</button>
      <button onClick={getCurrentTime}>Get current time</button>
      <button onClick={getPlaybackRate}>Get playback rate</button>
    </div>
    <div style={{marginTop: "10px", padding:"10px"}}>
      <GumletPlayer
        ref={playerRef}
        videoID="64bfb0913ed6e5096d66dc1e"
        title="Gumlet Player Example"
        style={{height: "100vh", width: "100vw", position:"relative"}}
        schemaOrgVideoObject={{"@context":"https://schema.org","@type":"VideoObject","name":"Siren pink 3:4 video","description":"","thumbnailUrl":[["https://video.gumlet.io/603cc6a9926fb6233baebb34/66487345e3dcc416dc9bbb5b/thumbnail-1-0.png?v=1716024171990"]],"uploadDate":"2024-05-18T09:22:13.592Z","duration":"PT7.833333S","embedUrl":"https://play.gumlet.io/embed/66487345e3dcc416dc9bbb5b"}}
        autoplay={false}
        preload={false}
        muted={true}
        disable_player_controls={false}
        t={35}
        onReady={() => console.log("Player is ready.")}
        onPlay={() => console.log("Video is playing.")}
        onPause={() => console.log("Video is paused.")}
        onProgress={(e) => console.log("Video is at", e.percent)}
        onTimeUpdate={(e) => console.log("Video is at", e.seconds, "seconds, total duration ", e.duration, " seconds.")}
        onEnded={() => console.log("Video has ended.")}
        onFullScreenChange={(e) => console.log("Full screen change event", e)}
        onPipChange={(e) => console.log("Picture in picture change event", e)}
        onAudioChange={(e) => console.log("Audio changed event", e)}
        onQualityChange={(e) => console.log("Quality changed event", e)}
        onVolumeChange={(e) => console.log("Volume changed event", e)}
        onSeeked={(e) => console.log("Seeked event", e)}
        onError={(e) => console.log("Error event", e)}
      />
    </div>
  </>
}

export default App


Properties supported:

Prop

Description

Default

videoID String Required

Video ID which is generated after processing the video on gumlet

title String

Title of the iframe

Gumlet video player

style Object

Style tag passed on to the iframe container

{padding:"56.25% 0 0 0", position:"relative"}

schemaOrgVideoObject Object

schema.org object which is added to a script tag

autoplay Boolean

Should the video autoplay

Default set in collection settings

preload Boolean

Should the video preload

Default set in collection settings

muted Boolean

Should the video player be muted

Default set in collection settings

gm_user_id String

User ID passed to gumlet insights object

null

gm_user_name String

User name passed to Gumlet insights object

null

gm_user_email String

User email passed to Gumlet insights object

null

gm_custom_data_1 String

Custom data 1 passed to gumlet insights object

null

loop Boolean

Should the video play in a loop

Default set in collection settings

thumbnail String

URL Encoded value of the Poster/Thumbnail URL which should be shown

Default set in asset details

drm_token String

Token generated on backend for DRM Protected content

null

expires Integer

Token expiry time from epoch in millis for DRM protected content

null

vast_tag_url String

URL Encoded VAST tag URL

null

start_high_res Boolean

Start the video in the highest resolution available

false

disable_seek Boolean

Disable the seek bar and remove forward and rewind buttons

false

disable_player_controls Boolean

Removes all player controls from the player

false

watermark_text String

Watermark text to be shown in the player

null

facebook_pixel_id String

Facebook pixel ID to be used to send data about playback

null

ga_tracking_id String

Google pixel ID to be used to send data about playback

null

t Integer

The playback instant in seconds to start the video at

null


Methods supported:

play: void
Play the media:

pause: void
Pause the media:

getPaused: boolean
Determine if the media is paused:

mute: void
Mute the media:

unmute: void
Unmute the media:

getMuted: boolean
Determine if the media is muted:

setVolume: void
Set the volume. Value needs to be between 0-100:

getVolume: number
Get the volume. Value will be between 0-100:

getDuration: number
Get the duration of the media is seconds:

setCurrentTime: number
Perform a seek to a particular time in seconds:

getCurrentTime: number
Get the current time in seconds of the video:

setPlaybackRate: number
Set the playback rate which are available in the player. Doesn't return an error if the passed playback rate is not available.

getPlaybackRate: number
Get the current playback rate of the player:


Callbacks supported:

This player supports callback functions to give you better control over your video.

onReady - fired when the video is ready.

onProgress - fires when the video is loading additional media for playback:

{
  percent: 0.8,
}

onTimeupdate - fires during playback:

{
  seconds: 10,
  duration: 40
}

onPlay - fires when the video starts to play.

onPause - fires when the video is paused.

onEnded - fires when the video is finished.

onFullScreenChange - fires when the video fullscreen is changed:

{
  isFullScreen: true // or false
}

onPipChange - fires when the video is put to or brought back from picture-in-picture.

{
  isPIP: true // or false
}

onPlaybackRateChange- fires when the video playback rate is changed by user.

onAudioChange - fires when the audio track of video is changed.

onQualityChange - fires when the video quality is changed.

onVolumeChange - fires when the volume level of the player is changed. It also gets fired when the player is muted or unmuted, along with muted and unmuted events respectively.

{
  volume: 50
}

onSeeked - fires when the video has been seeked by the user. Gives seeked_to time in seconds and total duration of video.

{
  seconds: 10
  duration: 50
}

onError - fires when an error occurs.


📘

If not using React and want to take control of player, check out docs here.


Are you using React with server-side rendering (SSR)? We have got you covered. Here is an example -React Embed Player SSR Example


Looking for a sample project? Here you go: https://github.com/gumlet/react-embed-player/tree/main/example


📹

Protect your video assets from piracy.

Easily enable secure video playback with Widevine and Fairplay DRM on your ReactJS apps with Gumlet.