DEV Community 👩‍💻👨‍💻

Radheshyam Gupta
Radheshyam Gupta

Posted on

How To Customize HTML video Tag controls attribute in React js using useRef() and useState() Hook ?

Go For Live Demo
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.

Hook Which played a big role for developing React Application are useState(),useEffect(),useRef().

Now we Come on Our Topic.

First We Know that ,1)How to Play video Through custom Bottom In React Js?

const videoPlay = () => {
        videoRef.current.play();
        setDurationOfVideo(videoRef.current.duration);
        getDurationOfVideo();

    }
Enter fullscreen mode Exit fullscreen mode

2)How to paused video Through custom Bottom In React Js?

const videoStop = () => {

        videoRef.current.pause();
    }
Enter fullscreen mode Exit fullscreen mode

3)How to Replay video Through custom Bottom In React Js?

const videoReplay= () => {
        setDurationOfVideo(videoRef.current.duration);
        videoRef.current.currentTime = 0;
        videoRef.current.play();

        getDurationOfVideo();
    }
Enter fullscreen mode Exit fullscreen mode

4)How to Show video Progress Bar Control In React Js?

 const getDurationOfVideo = () => {

        const videoIntervalTime = setInterval(() => {

            setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime));

            if (parseFloat(videoRef.current.currentTime) >= durationOfVideo)
            {

                clearVideoInterval();
            }

        }, 1000)



        const clearVideoInterval = () => {
            clearInterval(videoIntervalTime);
        }

    }

Enter fullscreen mode Exit fullscreen mode

5)How to Control playbackRate Property of video Tag In React Js?

const setVideoSpeed = (e) => {

        videoRef.current.playbackRate = parseFloat(e.target.value);
    }

Enter fullscreen mode Exit fullscreen mode

6)How to Control video tag Progress Bar Control In React Js?


const videoDuration = (e) => {

        setCurrentDurationOfVideo(parseFloat(e.target.value));
        videoRef.current.currentTime = parseFloat(e.target.value);
    }

Enter fullscreen mode Exit fullscreen mode

Now Second We Know that ,1)How to Control video Audio volume Through custom Progress Bar In React Js?

const volumebar = (e) => {

        const valumValue = parseFloat(e.target.value) / 100;

        setVolumOfVideo(e.target.value);

        videoRef.current.volume = valumValue.toFixed(1);

    }
Enter fullscreen mode Exit fullscreen mode

2)How to Mute video tag Audio In React Js?

const videoMute = () => {

        videoRef.current.muted = true;
    }
Enter fullscreen mode Exit fullscreen mode

3)How to UnMute video tag Audio In React Js?

const videoUnMute = () => {

        videoRef.current.muted = false;
    }


Enter fullscreen mode Exit fullscreen mode

*Now Finally We Control All required HTMl Video Tag controls attribute in React js. Final Code are Below.
1) app.css File
*

.customVideoTagClass {
    width: 450px;
    height: 300px;
    border: 2px solid black;
    margin: 70px 0px 0px 20%;
    border-radius:5px;
    float:left;
}
.customVideoTagClass video{
    height:inherit;
    width:inherit;
}

.customVideoTagControlsClass {
    width: 450px;
    height: 300px;
    margin: 70px 0px 0px 10px;
    border: 1px solid black;
    border-radius: 5px;
    float: left;
}
    .customVideoTagControlsClass button{
        border:1px solid orange;
        border-radius:2px;
        padding:5px;
        margin:10px 0px 1px 15px;
        width:70px;
        background-color:coral;
        cursor:pointer;
    }
    .customVideoTagControlsClass input[type=range] {
        width: 377px;
    }
Enter fullscreen mode Exit fullscreen mode

2> App.js File

import React, { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {

    const [volumOfVideo, setVolumOfVideo] = useState(100);
    const [durationOfVideo, setDurationOfVideo] = useState(0);
    const [currentDurationOfVideo, setCurrentDurationOfVideo] = useState(0);

    const videoRef = useRef();

    const getDurationOfVideo = () => {

        const videoIntervalTime = setInterval(() => {

            setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime));

            if (parseFloat(videoRef.current.currentTime) >= durationOfVideo)
            {

                clearVideoInterval();
            }

        }, 1000)



        const clearVideoInterval = () => {
            clearInterval(videoIntervalTime);
        }

    }

    const volumebar = (e) => {

        const valumValue = parseFloat(e.target.value) / 100;

        setVolumOfVideo(e.target.value);

        videoRef.current.volume = valumValue.toFixed(1);

    }

    const videoPlay = () => {
        videoRef.current.play();
        setDurationOfVideo(videoRef.current.duration);
        getDurationOfVideo();

    }

    const videoStop = () => {

        videoRef.current.pause();
    }

    const videoReplay= () => {
        setDurationOfVideo(videoRef.current.duration);
        videoRef.current.currentTime = 0;
        videoRef.current.play();

        getDurationOfVideo();
    }

    const videoMute = () => {

        videoRef.current.muted = true;
    }

    const videoUnMute = () => {

        videoRef.current.muted = false;
    }

    const setVideoSpeed = (e) => {

        videoRef.current.playbackRate = parseFloat(e.target.value);
    }

    const videoDuration = (e) => {

        setCurrentDurationOfVideo(parseFloat(e.target.value));
        videoRef.current.currentTime = parseFloat(e.target.value);
    }



    return (
        <> <h1 style={{ textAlign: 'center' }}>The Customize video controls attribute</h1>
            <div className='customVideoTagClass'>

                <video ref={videoRef} preload='auto'>
                    <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'></source>
                </video>
            </div>
            <div className='customVideoTagControlsClass'>
                <button onClick={videoPlay}>Play</button>
                <label>playback speed</label>
                <select onChange={ setVideoSpeed}>
                    <option value={1.0}>normal speed</option>
                    <option value={0.5}>slower</option>
                    <option value={2.0}>faster speed</option>
                </select><br />
                <button onClick={videoStop} >Stop</button><br />
                <button onClick={videoReplay}>Repaly</button><br />
                <button onClick={videoMute}>Mute</button><br />
                <button onClick={videoUnMute}>Unmute</button><br />
                <label><b>volume</b></label><input type='range' min="0" max="100" step='10' value={volumOfVideo} onChange={volumebar} /><br /><br />
                <label><b>Scrubbing Video</b></label><input type='range' min="0" max={durationOfVideo} value={currentDurationOfVideo} onChange={videoDuration} />
            </div>
        </>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Well done! Finally Control And Make A GUI For Video Tag!

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!