How To Customize HTML video Tag controls attribute in React js using useRef() and useState() Hook ?
Tags: javascript, beginners, react, tutorial
Published: 2022-10-16 06:45:58

[Go For Live Demo](https://biharisoft.com/EduBoxLive/VideoTagControlAttributesInRactJs)
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();
       
    }
```

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

```
const videoStop = () => {

        videoRef.current.pause();
    }
```
**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();
    }
```

**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);
        }

    }

```

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

```
const setVideoSpeed = (e) => {

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

```



**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);
    }

```


**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);

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

```
const videoMute = () => {

        videoRef.current.muted = true;
    }
```

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


```
const videoUnMute = () => {

        videoRef.current.muted = false;
    }


```

**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;
    }
```

**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;
```
Well done! Finally Control And Make A GUI For Video Tag!

Drop some love by liking or commenting ♥


**_Reference [w3schools](https://www.w3schools.com/react/default.asp)_**

**[Download Source Code from GitHub Repository](https://github.com/BIHARISOFT/EduBox/tree/master/video_tag_controls_attribute)**