React 📽️에서 맞춤형 비디오 플레이어 만들기

여러분, 이 튜토리얼에서는 React에서 사용자 지정 비디오 플레이어를 빌드하는 방법을 살펴보겠습니다. 바로 뛰어들자!

설정

새로운 반응 앱 만들기

npx create-react-app custom-video-player

대청소

App.js의 앱 div에서 모든 항목을 삭제합니다.

import "./App.css";

function App() {
  return <div className="app"></div>;
}

export default App;

App.css의 모든 항목 삭제

in index.css 추가-

* {
  margin: 0;
}

비디오 플레이어용 UI 만들기

비디오 추가

앱 div 내에서 비디오의 src와 함께 비디오 태그를 추가하고 스타일 지정을 위해 className도 추가하겠습니다.

 <video
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>

비디오 컨트롤 추가

비디오 구성 요소 아래에 아이콘으로 일부 Svgs가 있는 이 div를 추가합니다. 나와 같은 직접 Svg를 사용하거나 아이콘에 대한 아이콘 라이브러리를 사용할 수 있습니다 :).

  <div className="controlsContainer">
        <div className="controls">
          <img className="controlsIcon" alt="" src="/backward-5.svg" />
          <img className="controlsIcon--small" alt="" src="/play.svg" />
          <img className="controlsIcon" alt="" src="/forward-5.svg" />
        </div>
  </div>

시간에 대한 진행률 표시줄 추가

또한 현재 시간과 비디오의 총 시간을 보여주는 진행률 표시줄을 만들 것입니다.

 <div className="timecontrols">
        <p className="controlsTime">1:02</p>
        <div className="time_progressbarContainer">
          <div style={{ width: "40%" }} className="time_progressBar"></div>
        </div>
        <p className="controlsTime">2:05</p>
   </div>

Forgive me for not having very good naming conventions in classes. I have forgotten how to name my classes because of Tailwind :P

UI 스타일링

비디오 플레이어는 지금 보기에 매우 못생겼으니 스타일을 지정해 보겠습니다. App.css에서 몇 가지 스타일을 추가하겠습니다.

/* Main Container */

.app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Video */

.video {
  width: 100vw;
  height: 100vh;
}

/* Controls */

.controlsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  background-color: transparent;
  margin-top: -50vw;
  padding: 0 40px;
  z-index: 20;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 18rem;
  margin: auto;
}

.controlsIcon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-left: 10rem;
  margin-right: 10rem;
}

.controlsIcon--small {
  width: 32px;
  height: 32px;
  cursor: pointer;
  margin-left: 10rem;
  margin-right: 10rem;
}

/* The time controls section */

.timecontrols {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  bottom: 4rem;
  margin-left: 10vw;
}

.time_progressbarContainer {
  background-color: gray;
  border-radius: 15px;
  width: 75vw;
  height: 5px;
  z-index: 30;
  position: relative;
  margin: 0 20px;
}

.time_progressBar {
  border-radius: 15px;
  background-color: indigo;
  height: 100%;
}

.controlsTime {
  color: white;
}

이제 비디오 플레이어는 다음과 같습니다.

플레이어에 논리 추가

기능을 작업하려면 먼저 useRef 후크를 사용하여 비디오에 참조를 첨부해야 합니다. 따라서 아래 제공된 단계를 따르십시오.

다음과 같이 참조를 만듭니다.

const videoRef = useRef(null);

반응에서 useRef 후크를 가져옵니다.

import { useRef } from "react";

동영상에 첨부

 <video
    ref={videoRef}
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>

재생 및 일시 정지 기능

재생 및 일시 정지를 위해 제어 인수를 취하고 제어에 따라 비디오를 재생하거나 일시 중지하는 간단한 함수를 만듭니다.

 const videoHandler = (control) => {
    if (control === "play") {
      videoRef.current.play();
    } else if (control === "pause") {
      videoRef.current.pause();
    }
  };

이제 play.svg 이미지에서 onClick 기능을 추가하여 비디오를 시작합니다.

  <img
     onClick={() => videoHandler("play")}
     className="controlsIcon--small"
     alt=""
     src="/play.svg"
     />

아이콘을 클릭하시면 영상이 재생됩니다!

재생/일시정지 상태에 따른 아이콘 변경
이를 달성하기 위해 useState 후크를 사용할 것입니다. 다음과 같이 재생 상태를 만듭니다.

const [playing, setPlaying] = useState(false);

const 비디오 핸들러 함수에서 onClick 값을 다음과 같이 변경해야 합니다.

const videoHandler = (control) => {
    if (control === "play") {
      videoRef.current.play();
      setPlaying(true);
    } else if (control === "pause") {
      videoRef.current.pause();
      setPlaying(false);
    }
  };

아이콘 변경
재생 아이콘이 있는 곳에서 이제 삼항 연산자의 도움을 받아 조건에 따라 렌더링합니다.

  {playing ? (
            <img
              onClick={() => videoHandler("pause")}
              className="controlsIcon--small"
              alt=""
              src="/pause.svg"
            />
          ) : (
            <img
              onClick={() => videoHandler("play")}
              className="controlsIcon--small"
              alt=""
              src="/play.svg"
            />
          )}

이제 비디오를 재생하고 일시 중지할 수 있습니다 🥳

비디오 전달 및 되돌리기

나는 이것을 위해 매우 간단한 기능을 만들 것입니다.

 const fastForward = () => {
    videoRef.current.currentTime += 5;
  };

  const revert = () => {
    videoRef.current.currentTime -= 5;
  };

이제 이러한 기능을 각 버튼의 onClick으로 추가합니다.

앞으로

<img
  onClick={fastForward}
  className="controlsIcon"
  alt=""
  src="/forward-5.svg"
     />

돌아가는 것

<img
  onClick={revert}
  className="controlsIcon"
  alt=""
  src="/backward-5.svg"
     />

시간 진행률 표시줄

동영상 길이 가져오기

동영상 길이를 확인하려면 다음 단계를 따르세요.

동영상 구성요소에 ID를 지정합니다.

 <video
    id="video1"
    ref={videoRef}
    className="video"
    src="https://res.cloudinary.com/dssvrf9oz/video/upload/v1635662987/pexels-pavel-danilyuk-5359634_1_gmixla.mp4"
 ></video>

비디오 길이를 저장할 상태를 만듭니다.

const [videoTime, setVideoTime] = useState(0);

영상 재생시 영상시간을 이렇게 설정해주세요

if (control === "play") {
      videoRef.current.play();
      setPlaying(true);
      var vid = document.getElementById("video1");
      setVideoTime(vid.duration);
    }

이제 하드코딩된 시간 대신 videoTime 변수를 사용할 수 있습니다. 이 문자열 조작은 시간을 1:05와 같은 형식으로 만듭니다.

  <p className="controlsTime">
    {Math.floor(videoTime / 60) + ":" + ("0" + Math.floor(videoTime % 60)).slice(-2)}
 </p>

비디오의 현재 시간 가져오기

비디오의 현재 시간을 얻으려면 1초마다 실행되는 함수를 사용해야 하므로 window.setInterval을 사용할 것입니다.

window.setInterval(function () {
    setCurrentTime(videoRef.current?.currentTime);
  }, 1000);

이제 항상 그렇듯이 값을 저장할 상태를 만들어야 합니다.

const [currentTime, setCurrentTime] = useState(0);

하드 코드 값 대신 변수를 사용합니다.

<p className="controlsTime">
    {Math.floor(currentTime / 60) + ":" + ("0" + Math.floor(currentTime % 60)).slice(-2)}
</p>

진행률 가져오기 및 진행률 표시줄에 설정

진행을 위한 다른 상태 만들기-

const [progress, setProgress] = useState(0);

이제 우리가 만든 window.setInterval 함수 안에 다른 줄을 추가합니다.

setProgress((videoRef.current?.currentTime / videoTime) * 100);

기능은 이제 다음과 같습니다.

window.setInterval(function () {
    setCurrentTime(videoRef.current?.currentTime);
    setProgress((videoRef.current?.currentTime / videoTime) * 100);
  }, 1000);

이제 맞춤 동영상 플레이어가 준비되었습니다 🎉🎊

유용한 링크-

GitHub repository

ReactJS docs

All socials