DEV Community

Building a Video Player in React

Suraj Vishwakarma on January 04, 2023

Introduction React has been the most popular JavaScript framework for building frontend. As a web developer, I recommend you learn React...

Read full post

akhilesh kumar ojha • Jan 4 '23

Nice post

Suraj Vishwakarma Documatic • Jan 4 '23

Thanks 👍

Ahmed Mannai • Jan 5 '23

Amazing I love it

Suraj Vishwakarma Documatic • Jan 5 '23

Thanks, Ahmed. Add more features to it.

Dashdave • Jan 10 '23

Thank you for this post, Really insightful

Juan V. Pino Contreras • Jan 10 '23

Thank you, please do more proyects with React

Suraj Vishwakarma Documatic • Jan 11 '23

Glad that you like it. Sure will do more of such projects.

Sahil Atahar • Aug 19 '23

Your setInterval is running when video is paused. You should check condition to run interval. If isPlaying is false then stop it.

useEffect(() => {
        let interval;

        if (isPlaying) {
            interval = setInterval(() => {
                const { min, sec } = formatTime(videoRef.current.currentTime);
                setCurrentTimeSec(videoRef.current.currentTime);
                setCurrentTime([min, sec]);
            }, 1000);
        } else {
            clearInterval(interval);
        }
        return () => clearInterval(interval);
    }, [isPlaying]);

Arjen Klaverstijn • Jan 15 '25 • Edited

see my response, you do not need intervals with video element

Arjen Klaverstijn • Jan 15 '25

its better to use the "timeupdate" event and "metadataloaded" etc. for duration in on the video element. This will clean up the code and update currentime only when needed.
developer.mozilla.org/en-US/docs/W...

Vetri Velan Arasu • Aug 3 '24

how about mute and quality control of video

Arjen Klaverstijn • Jan 15 '25

check my answer and check developer.mozilla.org/en-US/docs/W... for "volumechange" event