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)