DEV Community

How to Create a Video Player in React

Francisco Mendes on August 14, 2021

One of the things that interested me most recently is creating a fully customized video player. Obviously, nowadays we have services that provide w...

Read full post

Emeka Orji • Mar 26 '22

Thanks @franciscomendes10866 , this helped me in a project I am working on, Thanks again

Carlos Jaramillo • Jun 14 '22

I really appreciate your time in this post!, Thank you.

George WL • Oct 26 '21

That feels like too many useStates, and could more easily be combined into a single reducer and/or a custom hook

Francisco Mendes • Aug 15 '21

Good tip, the code is definitely easier to read. Thank you! 🙌

Jackieli • Sep 23 '21

css style not work github code ？

George WL • Oct 26 '21

How so do you mean?

Francisco Mendes • Sep 23 '21

It is not working? In which component?

Kode Creer • Jan 5 '22

This isn't working in the progress bar even after pasting your code into the temple and the same libraries. Please provide a GitHub link please, it makes solving these issues easier.

David P. • Mar 10 '23

Css my friend

George WL • Oct 26 '21

I would recommend instead of using a large state object, you instead make use of the useReducer hook, this would also simplify your handlers by bundling them into the reducer

Francisco Mendes • Oct 26 '21

It's a good approach 🧐 Thanks 🙌

spooner.eth • Dec 13 '21

hi, somehow the video is not showing on mobile safari / chrome. anyone who had the same problem and a solution?

Hung Nguyen • Aug 15 '21

Thanks a lot bro! This article is really good and I learned more thing from it.

Francisco Mendes • Aug 15 '21

Thank you very much! I am happy to know! 💪

M Ibrahim Hayat • Nov 10 '21

i want to add full Screen button is there any solution for full screen?

Andrew Nosov • Mar 10 '22

Hi! You can make it by adding to useVideoPlayer hook following func:

const toggleFullscreen = () => {
    if (videoElement.current) {
            videoElement.current.requestFullscreen();
    }
}

Then you can run this func by clicking on the desired icon.

hype-lab • Mar 24 '23 • Edited

There seems to be inconsistency between the video element and the input type range element. Exactly like in the article code when triggering handleVideoProgress, the time calculated for progress seems completely inconsistent (event.target.value is always close to zero),
also player css doesn't seem to work very well with elements:

"Pause" text and "unmute" text instead of buttons because seems there isn't class for them in the sample player.css.
(even if the graphics don't bother me that much at the moment)

hype-lab • Mar 27 '23

Ok it's my fault, I was too superficial.
In my case it was all about CSS.
The problem lies in having to deal with the pseudo elements (both webkit and moz and ms), to be managed even when Fullscreen API is requested (always managing the different browsers)

bvince77 • Aug 16 '21 • Edited

Great article. Very easy to understand and follow

Francisco Mendes • Aug 16 '21

Thank you very much for your feedback! 👊

Sajad DP • Aug 15 '21

It,s great! thanks man.

Francisco Mendes • Aug 15 '21

Thanks for the feedback! 👊

Shashwat7725 • May 21 '23

It is not getting deployed in netlify

dmt • Dec 26 '22 • Edited

Great article, but this approach is bad for performance though since the App component (and the video element) keep getting re-rendered on every video frame