React에서 비디오 플레이어를 만드는 방법

React에서 비디오 플레이어를 만드는 것은 어려운 작업처럼 보일 수 있습니다. 그러나 올바른 도구와 기술을 사용하면 비교적 쉽게 작업을 수행할 수 있습니다.

React에서 비디오 플레이어를 만드는 방법에는 내장 기능을 사용하는 것과 타사 라이브러리를 사용하는 두 가지 방법이 있습니다.

React에서 비디오 플레이어 만들기

React 비디오 플레이어를 만들기 전에 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 있는지 확인하십시오.

다음 비디오 플레이어 기능을 추가할 기본 React 앱을 만드는 것부터 시작하세요.

내장 기능 사용(React Hooks)

React에서 비디오 플레이어를 만드는 첫 번째 옵션은 내장 기능을 사용하는 것입니다.

비디오와 모든 컨트롤을 표시할 플레이어 구성 요소를 만드는 것부터 시작하십시오. 이렇게 하려면 “Player.js”라는 파일을 만들고 다음 코드를 추가합니다.

import React from 'react';


const Player = () => {
return (
<div>
<video width="100%" height="100%" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
)
}

export default Player;

이 코드는 React 라이브러리를 가져오고 플레이어 구성 요소를 만듭니다. 또한 controls 속성이 “true”로 설정된 비디오 요소를 추가합니다. 이렇게 하면 기본 비디오 플레이어가 페이지에 추가됩니다.

다음으로 재생/일시정지 버튼을 추가합니다. 이렇게 하려면 플레이어 구성 요소에 몇 줄의 코드를 추가해야 합니다. Player.js 파일에 다음 코드를 추가합니다.

import React, { useState, useRef } from 'react';


const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef(null);

export default Player;

이 코드는 useState 및 useRef 후크를 사용하여 비디오의 상태(재생 중인지 일시 정지 중인지 여부)와 비디오 요소에 대한 참조를 추적합니다. 또한 비디오를 재생하고 일시 중지하는 togglePlay 기능을 추가합니다. 버튼 요소는 togglePlay 기능을 트리거합니다.

마지막 단계는 진행률 표시줄을 추가하는 것입니다. 이렇게 하려면 Player.js 파일에 몇 줄의 코드를 더 추가해야 합니다. 다음을 추가합니다.

import React, { useState, useRef } from 'react';


const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef(null);

export default Player;

이 코드는 handleProgress 함수를 추가합니다. 이 기능은 진행률 표시줄을 업데이트합니다. 또한 handleProgress 함수를 트리거할 비디오 요소에 onTimeUpdate 이벤트 리스너를 추가합니다. 마지막으로 value 및 max 속성이 각각 진행률 및 100으로 설정된 진행률 요소를 페이지에 추가합니다.

타사 라이브러리 사용

React에서 비디오 플레이어를 만드는 두 번째 옵션은 타사 라이브러리를 사용하는 것입니다. 사용할 수 있는 라이브러리가 많이 있지만 가장 인기 있는 라이브러리 중 일부는 ReactPlayer 및 React-media-player입니다.

ReactPlayer

ReactPlayer는 몇 줄의 코드만으로 비디오 플레이어를 만들 수 있는 간단하고 가벼운 라이브러리입니다. 설치하려면 터미널에서 다음 명령을 실행하십시오.

npm install react-player

설치가 완료되면 다음과 같이 사용할 수 있습니다.

import React from 'react';
import ReactPlayer from 'react-player';


const Player = () => {
return (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
width="100%"
height="100%"
controls
/>
)
}

export default Player;

이 코드는 반응 플레이어 라이브러리에서 ReactPlayer 구성 요소를 가져와 페이지에 추가합니다. URL, 너비, 높이 및 제어 속성을 설정합니다. 이러한 각 매개 변수를 하나씩 살펴보십시오.

• url: 재생하려는 비디오의 URL입니다.
• 너비: 비디오 플레이어의 너비입니다.
• 높이: 비디오 플레이어의 높이입니다.
• controls: 비디오 플레이어에 컨트롤이 있는지 여부를 결정하는 부울 속성입니다.

반응-비디오-js-플레이어

react-video-js-player는 몇 줄의 코드만으로 비디오 플레이어를 만들 수 있는 또 다른 간단하고 가벼운 라이브러리입니다. 설치하려면 터미널에서 다음 명령을 실행하십시오.

npm install react-video-js-player

설치가 완료되면 다음과 같이 사용할 수 있습니다.

import React from "react";
import VideoPlayer from "react-video-js-player";


const Player = () => {
return (
<VideoPlayer
width="100%"
height="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
/>
)
}

export default Player;

이 코드는 react-video-js-player 라이브러리에서 VideoPlayer 구성 요소를 가져와 페이지에 추가합니다.

추가 비디오 플레이어 기능

다음과 같은 추가 기능을 비디오 플레이어에 추가할 수 있습니다.

1. 포스터 추가: 동영상 요소의 포스터 속성을 이미지의 URL로 설정하여 동영상 플레이어에 포스터 이미지를 추가할 수 있습니다.
2. 루핑: 비디오 요소의 루프 속성을 “true”로 설정하여 비디오를 루핑할 수 있습니다.
3. 음소거: video 요소의 muted 속성을 “true”로 설정하여 비디오를 음소거할 수 있습니다.
4. 자동재생: 동영상 요소의 자동재생 속성을 ‘true’로 설정하여 동영상을 자동재생할 수 있습니다.

비디오 플레이어에 사용자 지정 컨트롤을 추가할 수도 있습니다. 이렇게 하려면 동영상 요소에 이벤트 리스너를 추가하고 동영상을 제어하는 ​​함수를 작성해야 합니다.

비디오 플레이어로 사용자 참여 증대

올바른 도구와 기술을 사용하면 React에서 비디오 플레이어를 쉽게 만들 수 있습니다. 추가 기능을 추가하여 사용자 참여를 높일 수도 있습니다. 미디어 플레이어는 웹 사이트 또는 애플리케이션에서 사용자 참여를 높일 수 있는 좋은 방법입니다.

사이트에 비디오 플레이어를 추가한 후에는 사용자 참여를 추적하여 원하는 효과가 있는지 확인하십시오. 또한 A/B 테스트를 배포하여 비디오 플레이어를 추가하면 전환율이 증가하는지 확인할 수 있습니다.