useRef() 및 useState() Hook을 사용하여 React js에서 HTML 비디오 태그 컨트롤 속성을 사용자 지정하는 방법은 무엇입니까?

Go For Live Demo
반응 애플리케이션에서 작업한 적이 있다면 React Hook은 HTML 요소와 그 속성을 제어하는 ​​데 큰 역할을 했습니다.

Hook React Application 개발에 큰 역할을 한 것은 useState(), useEffect(), useRef()입니다.

이제 우리는 우리의 주제에 도달합니다.

먼저 우리는 1) React Js에서 사용자 지정 Bottom을 통해 비디오를 재생하는 방법을 알고 있습니까?

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

    }

2) 사용자 지정 Bottom In React Js를 통해 비디오를 일시 중지하는 방법은 무엇입니까?

const videoStop = () => {

        videoRef.current.pause();
    }

3) 사용자 지정 Bottom In React Js를 통해 비디오를 재생하는 방법은 무엇입니까?

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

        getDurationOfVideo();
    }

4) 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)React Js에서 비디오 태그의 playbackRate 속성을 제어하는 ​​방법은 무엇입니까?

const setVideoSpeed = (e) => {

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

6) React Js에서 비디오 태그 진행률 표시 줄 제어를 제어하는 ​​방법은 무엇입니까?

const videoDuration = (e) => {

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

이제 두 번째로 우리는 1) React Js에서 사용자 정의 진행률 표시 줄을 통해 비디오 오디오 볼륨을 제어하는 ​​방법을 알고 있습니까?

const volumebar = (e) => {

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

        setVolumOfVideo(e.target.value);

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

    }

2) React Js에서 비디오 태그 오디오를 음소거하는 방법은 무엇입니까?

const videoMute = () => {

        videoRef.current.muted = true;
    }

3) React Js에서 비디오 태그 오디오를 음소거 해제하는 방법은 무엇입니까?

const videoUnMute = () => {

        videoRef.current.muted = false;
    }

*이제 마지막으로 React js에서 필요한 모든 HTML 비디오 태그 컨트롤 속성을 제어합니다. 최종 코드는 다음과 같습니다.
1) app.css 파일
*

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

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;

잘했어요! 마지막으로 비디오 태그용 GUI를 제어하고 만드십시오!

좋아요나 댓글로 사랑을 전해주세요♥

참조 w3schools

Download Source Code from GitHub Repository