Creating a custom video player in React opens up a world of flexibility and design possibilities. You can build something that goes beyond the standard HTML video element, giving your users a sleek, modern interface along with rich functionality like custom play/pause buttons, volume control, speed adjustments, and even quality settings. In this blog, I'll explain how you can create a React video player with custom controls. I’ll focus on some of the most important functions that bring your player to life. After the explanation, I'll provide the full code so you can dive right into the development process. ### Key Features of the Video Player Before we get into the technical details, here’s what our custom video player will offer: ## The Heart of the Video Player: Key Functions ### Play/Pause Toggle The togglePlay function is the foundation of the video player. It allows the user to start or pause the video with a single button click. ```javascript const togglePlay = () => { if (videoRef.current.paused) { videoRef.current.play(); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; ``` Here, we use the videoRef to directly control the video element. The function checks if the video is paused or playing and then changes the state accordingly. ### Handling Volume Volume control is another essential feature for any video player. We handle this through the handleVolumeChange function, which updates the volume both in the UI and on the actual video element. ```javascript const handleVolumeChange = (e) => { const newVolume = parseFloat(e.target.value); setVolume(newVolume); videoRef.current.volume = newVolume; }; ``` This function listens for changes in the volume slider and synchronizes it with the video's volume level in real-time. ### Seek Bar for Video Scrubbing A seek bar allows users to jump to different parts of the video. This is achieved by using the handleSeek function: ```javascript const handleSeek = (e) => { const time = parseFloat(e.target.value); setCurrentTime(time); videoRef.current.currentTime = time; }; ``` Here, we update the currentTime of the video when the user interacts with the seek bar, making video scrubbing intuitive and smooth. ### Video Speed Control Changing playback speed is a neat feature, especially for instructional videos. This is handled by the handleSpeedChange function: ```javascript const handleSpeedChange = (speed) => { setCurrentSpeed(speed); videoRef.current.playbackRate = speed; }; ``` Users can choose from different playback speeds, and the video adjusts instantly. ### Fullscreen Toggle A modern video player wouldn't be complete without fullscreen support. The toggleFullscreen function provides this: ```javascript const toggleFullscreen = () => { if (videoRef.current) { if (document.fullscreenElement) { document.exitFullscreen(); } else { videoRef.current.requestFullscreen(); } } }; ``` This function checks if the video is already in fullscreen mode and toggles it accordingly. ## Elegant Design Considerations Design plays a crucial role in how users perceive your video player. In this build, I’ve designed the player to be smooth transitions, transparent backgrounds, and intuitive button placement. Controls like play/pause, volume, and the seek bar are only visible when the user hovers over the video. This keeps the interface clean and non-intrusive while watching videos. ![Image](https://res.cloudinary.com/drwyub05x/image/upload/v1729664423/image_1_nnr6sk.png) ![Image](https://res.cloudinary.com/drwyub05x/image/upload/v1729664423/image_2_deol4p.png) ![Image](https://res.cloudinary.com/drwyub05x/image/upload/v1729664361/image_3_krpdgq.png) ## Full Code Here’s the complete code for the custom video player, including all features discussed above: ```javascript import React, { useState, useEffect, useRef } from 'react'; const videos = [ { id: 1, title: 'Advanced React Hooks Tutorial', channel: 'React Mastery', views: '1.2M views', timestamp: '2 weeks ago', thumbnail: 'https://www.cibaky.com/wp-content/uploads/2015/12/placeholder-2.jpg' }, { id: 2, title: 'Building Scalable APIs with GraphQL', channel: 'Backend Wizards', views: '890K views', timestamp: '1 month ago', thumbnail: 'https://www.cibaky.com/wp-content/uploads/2015/12/placeholder-2.jpg' }, { id: 3, title: 'Machine Learning Fundamentals', channel: 'AI Explorers', views: '2.5M views', timestamp: '3 months ago', thumbnail: 'https://www.cibaky.com/wp-content/uploads/2015/12/placeholder-2.jpg' }, { id: 4, title: 'Responsive Web Design Techniques', channel: 'CSS Ninjas', views: '1.8M views', timestamp: '2 months ago', thumbnail: 'https://www.cibaky.com/wp-content/uploads/2015/12/placeholder-2.jpg' }, { id: 5, title: 'Blockchain Technology Explained', channel: 'Crypto Academy', views: '3.1M views', timestamp: '1 week ago', thumbnail: 'https://www.cibaky.com/wp-content/uploads/2015/12/placeholder-2.jpg' }, ]; const Player = () => { const [isDarkMode, setIsDarkMode] = useState(false); const [isPlaying, setIsPlaying] = useState(false); const [volume, setVolume] = useState(1); const [currentTime, setCurrentTime] = useState(0); const [currentQuality, setCurrentQuality] = useState('auto'); const [duration, setDuration] = useState(0); const [showQualityMenu, setShowQualityMenu] = useState(false); const [showSpeedMenu, setShowSpeedMenu] = useState(false); const [currentSpeed, setCurrentSpeed] = useState(1); const [controlsVisible, setControlsVisible] = useState(true); const hideControlsTimeoutRef = useRef(null); const hoverTimeoutRef = useRef(null); const [isNewVideoProcessing, setIsNewVideoProcessing] = useState(false); const [videoTitle, setVideoTitle] = useState('Breakthrough Research in Chemistry: Inside the Lab with a Scientist'); const [videoDescription, setVideoDescription] = useState('Join us as we step into the chemistry lab of a dedicated research scientist. In this video, we explore the intricate processes and cutting-edge techniques used to make groundbreaking discoveries. Watch as the scientist carefully conducts experiments, analyzes reactions, and works towards unlocking new insights in the field of chemistry. Whether you\'re a fellow researcher or simply curious about the scientific process, this behind-the-scenes look offers a fascinating glimpse into the world of chemistry research'); const [videoTags, setVideoTags] = useState('video'); const [videoLikes, setVideoLikes] = useState('12k'); const [videoViews, setVideoViews] = useState('145k'); const [videoUrls, setVideoUrls] = useState(["https://videos.pexels.com/video-files/3195394/3195394-sd_640_360_25fps.mp4"]); const [thumbnailPicture, setThumbnailPicture] = useState('https://media.istockphoto.com/id/1205722646/video/laboratory-beaker-and-test-tube-with-data-and-structural-formula-of-chemical-compounds-in-the.jpg?s=640x640&k=20&c=X5s3n9mKw4uVYdPtIZN2GcpBWut02dS7XRATZ2C5jxg='); const [availableQualities, setAvailableQualities] = useState(['auto']); const videoRef = useRef(null); useEffect(() => { const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); setIsDarkMode(darkModeMediaQuery.matches); const handleChange = (e) => setIsDarkMode(e.matches); darkModeMediaQuery.addEventListener('change', handleChange); return () => darkModeMediaQuery.removeEventListener('change', handleChange); }, []); useEffect(() => { const video = videoRef.current; if (video) { video.addEventListener('timeupdate', handleTimeUpdate); video.addEventListener('loadedmetadata', handleLoadedMetadata); return () => { video.removeEventListener('timeupdate', handleTimeUpdate); video.removeEventListener('loadedmetadata', handleLoadedMetadata); }; } }, []); useEffect(() => { // Check if videoUrls has been updated if (videoUrls.length > 0) { const videoSrc = videoUrls[0]; // Default to the first URL console.log('Video Source:', videoSrc); if (videoSrc) { const video = videoRef.current; video.src = videoSrc; } else { console.log('No valid video source found.'); } } else { console.log('No video URLs available.'); } }, [videoUrls]); useEffect(() => { const handleMouseEnter = () => { setControlsVisible(true); resetHideControlsTimeout(); startHoverTimeout(); }; const handleMouseLeave = () => { resetHoverTimeout(); startHideControlsTimeout(); }; const videoElement = videoRef.current; if (videoElement) { videoElement.addEventListener('mouseenter', handleMouseEnter); videoElement.addEventListener('mouseleave', handleMouseLeave); } startHideControlsTimeout(); return () => { if (videoElement) { videoElement.removeEventListener('mouseenter', handleMouseEnter); videoElement.removeEventListener('mouseleave', handleMouseLeave); } clearTimeout(hideControlsTimeoutRef.current); clearTimeout(hoverTimeoutRef.current); }; }, []); const resetHideControlsTimeout = () => { clearTimeout(hideControlsTimeoutRef.current); }; const startHideControlsTimeout = () => { hideControlsTimeoutRef.current = setTimeout(() => { setControlsVisible(false); }, 5000); // Hide controls after 5 seconds }; const resetHoverTimeout = () => { clearTimeout(hoverTimeoutRef.current); }; const startHoverTimeout = () => { hoverTimeoutRef.current = setTimeout(() => { // Do nothing if still hovering after a long time }, 10000); // Long hover timeout (e.g., 10 seconds) }; const handleTimeUpdate = () => { setCurrentTime(videoRef.current.currentTime); }; const handleLoadedMetadata = () => { setDuration(videoRef.current.duration); }; const togglePlay = () => { if (videoRef.current.paused) { videoRef.current.play(); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; const handleVolumeChange = (e) => { const newVolume = parseFloat(e.target.value); setVolume(newVolume); videoRef.current.volume = newVolume; }; const handleSeek = (e) => { const time = parseFloat(e.target.value); setCurrentTime(time); videoRef.current.currentTime = time; }; const formatTime = (time) => { const minutes = Math.floor(time / 60); const seconds = Math.floor(time % 60); return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; }; const handleQualityChange = (quality) => { const url = videoUrls.find((video) => video.includes(quality)); if (url) { const video = videoRef.current; const wasPlaying = !video.paused; // Check if the video was playing before the quality change video.src = url; // Ensure the video resumes playing video.load(); video.oncanplay = () => { if (wasPlaying) { video.play(); // Resume playback if it was playing before quality change } }; setCurrentQuality(quality); } setShowQualityMenu(false); }; const handleSpeedChange = (speed) => { setCurrentSpeed(speed); videoRef.current.playbackRate = speed; setShowSpeedMenu(false); }; const handleRewind = () => { if (videoRef.current) { videoRef.current.currentTime -= 10; } }; const handleForward = () => { if (videoRef.current) { videoRef.current.currentTime += 10; } }; const toggleFullscreen = () => { if (videoRef.current) { if (document.fullscreenElement) { document.exitFullscreen(); } else { videoRef.current.requestFullscreen(); } } }; return (

{/* Main content */}

{/* Video player */}

{/* Video info */}

{videoTitle}

Chemistry Fun

1.2M subscribers

{/* Video description */}

{videoViews} views • May 15, 2023

{videoDescription}

{/* Recommended videos */}

{videoTitle}

Chemistry Fun

Recommended videos

{video.title}

Building a Custom Video Player in React JS with Custom Controls and Elegant Design