Customizing React-Player with Custom UI Controls

Introduction react-player is a widely used library for embedding media players in React applications. While it comes with built-in controls, sometimes you need a custom UI to match a specific design or add extra functionality. In this blog, I'll walk you through how to build a custom UI for react-player using React hooks and event listeners. We'll cover adding a fullscreen button and a custom progress bar with tooltips. Install react-player First, install react-player if you haven't already: npm install react-player 2: Create the Player Component Set up a new component and import react-player along with React hooks: import React, { useRef, useState } from "react"; import ReactPlayer from "react-player"; 3: Set Up State and References const playerRef = useRef(null); const [playing, setPlaying] = useState(false); const [volume, setVolume] = useState(0.8); const [progress, setProgress] = useState(0); const [fullscreen, setFullscreen] = useState(false); 4: Add Handlers for Controls Define functions for play/pause, volume control, seeking, and fullscreen mode: const handlePlayPause = () => setPlaying(!playing); const handleVolumeChange = (e) => setVolume(parseFloat(e.target.value)); const handleProgress = (state) => setProgress(state.played * 100); const seekTo = (e) => { const newTime = (parseFloat(e.target.value) / 100) * playerRef.current.getDuration(); playerRef.current.seekTo(newTime); }; const toggleFullscreen = () => { const playerElement = document.querySelector(".custom-player"); if (!document.fullscreenElement) { playerElement.requestFullscreen(); setFullscreen(true); } else { document.exitFullscreen(); setFullscreen(false); } }; 5: Build the Player UI Use the handlers to add custom controls to the player: return ( {playing ? "Pause" : "Play"} {fullscreen ? "Exit Fullscreen" : "Fullscreen"} ); 6: Style the Player Enhance the UI with CSS for better visuals and usability: .custom-player { position: relative; width: 640px; height: 360px; background: black; } .controls { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 10px; background: rgba(0, 0, 0, 0.7); color: white; } button, input { margin: 0 5px; } /* Custom Progress Bar with Tooltip */ input[type="range"] { position: relative; cursor: pointer; } input[type="range"]::after { content: attr(data-tooltip); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background: black; color: white; padding: 3px 6px; font-size: 12px; border-radius: 4px; opacity: 0; transition: opacity 0.3s; } input[type="range"]:hover::after { opacity: 1; } 7: Run and Test Start your React app and test the custom controls: npm start 8: Further Enhancements Animated Controls: Improve UI interactions with subtle animations. Custom captions: Show the subtitle menu based on requirement (as per the supported languages by the actual video player) Live experience: Using an on-demand video, a live experience can be delivered by further customizing the custom controls with a defined start time

Mar 7, 2025 - 06:05

Customizing React-Player with Custom UI Controls

Introduction

react-player is a widely used library for embedding media players in React applications. While it comes with built-in controls, sometimes you need a custom UI to match a specific design or add extra functionality. In this blog, I'll walk you through how to build a custom UI for react-player using React hooks and event listeners. We'll cover adding a fullscreen button and a custom progress bar with tooltips.

Install react-player First, install react-player if you haven't already:

npm install react-player

2: Create the Player Component
Set up a new component and import react-player along with React hooks:

import React, { useRef, useState } from "react";
import ReactPlayer from "react-player";

3: Set Up State and References

const playerRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [volume, setVolume] = useState(0.8);
const [progress, setProgress] = useState(0);
const [fullscreen, setFullscreen] = useState(false);

4: Add Handlers for Controls
Define functions for play/pause, volume control, seeking, and fullscreen mode:

const handlePlayPause = () => setPlaying(!playing);

const handleVolumeChange = (e) => setVolume(parseFloat(e.target.value));

const handleProgress = (state) => setProgress(state.played * 100);

const seekTo = (e) => {
  const newTime = (parseFloat(e.target.value) / 100) * playerRef.current.getDuration();
  playerRef.current.seekTo(newTime);
};

const toggleFullscreen = () => {
  const playerElement = document.querySelector(".custom-player");
  if (!document.fullscreenElement) {
    playerElement.requestFullscreen();
    setFullscreen(true);
  } else {
    document.exitFullscreen();
    setFullscreen(false);
  }
};

5: Build the Player UI
Use the handlers to add custom controls to the player:

6: Style the Player
Enhance the UI with CSS for better visuals and usability:

.custom-player {
  position: relative;
  width: 640px;
  height: 360px;
  background: black;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

button, input {
  margin: 0 5px;
}

/* Custom Progress Bar with Tooltip */
input[type="range"] {
  position: relative;
  cursor: pointer;
}

input[type="range"]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

input[type="range"]:hover::after {
  opacity: 1;
}

7: Run and Test
Start your React app and test the custom controls:

npm start

8: Further Enhancements

Animated Controls: Improve UI interactions with subtle animations.
Custom captions: Show the subtitle menu based on requirement (as per the supported languages by the actual video player)
Live experience: Using an on-demand video, a live experience can be delivered by further customizing the custom controls with a defined start time