DEV Community

Cover image for Building a Video Player in React

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
Collapse
 
kumarakh profile image
akhilesh kumar ojha •

Nice post

Collapse
 
surajondev profile image
Suraj Vishwakarma •

Thanks 👍

Collapse
 
jvbass profile image
Juan V. Pino Contreras •

Thank you, please do more proyects with React

Collapse
 
surajondev profile image
Suraj Vishwakarma •

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

Collapse
 
dashdave profile image
Dashdave •

Thank you for this post, Really insightful

Collapse
 
ahmedmannai profile image
Ahmed Mannai •

Amazing I love it

Collapse
 
surajondev profile image
Suraj Vishwakarma •

Thanks, Ahmed. Add more features to it.

Collapse
 
sahilatahar profile image
Sahil Atahar •

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]);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
arjen_klaverstijn_3eb94ef profile image
Arjen Klaverstijn • • Edited

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

Collapse
 
arjen_klaverstijn_3eb94ef profile image
Arjen Klaverstijn •

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...

Collapse
 
vetrivelanarsu profile image
Vetri Velan Arasu •

how about mute and quality control of video

Collapse
 
arjen_klaverstijn_3eb94ef profile image
Arjen Klaverstijn •

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