React.js – react-player를 사용하여 로컬 비디오 재생하는 방법
React.js로 작업하고 있고 로컬 소스에서 비디오를 재생하려는 경우, react-player 모듈을 사용하면 프로세스를 간소화할 수 있습니다. react-player는 일반적으로 YouTube나 Facebook과 같은 온라인 플랫폼에서 비디오를 재생하는 데 사용되지만, 로컬 비디오도 재생할 수 있습니다.
방법 1: public 폴더에 비디오 파일 배치하기
React.js에서 로컬 비디오를 재생하는 한 가지 방법은 비디오 파일을 프로젝트의 public 폴더에 배치하는 것입니다. 이 방법은 특히 Create React App (CRA) 설정을 사용하는 경우 유용합니다.
시작하기 위해 public 폴더 내에 하위 폴더 (예: “videos”)를 생성하십시오. 그런 다음 react-player 컴포넌트의 URL을 정의할 때 비디오 파일의 이름이나 경로를 단순히 포함하면 됩니다:
import ReactPlayer from 'react-player';
class Video extends Component {
render () {
return (
<div className='player-wrapper'>
<ReactPlayer
className='react-player fixed-bottom'
url='videos/demo_video.MP4'
width='100%'
height='100%'
controls={true}
/>
</div>
)
}
}
방법 2: 비디오 객체 URL 사용하기
다른 접근 방식은 React.js에서 로컬 비디오를 재생하기 위해 비디오 객체 URL을 생성하는 것입니다. 이 방법은 비디오 파일을 처리하기 위해 useState 훅을 활용하고 파일 입력을 캡처하기 위해 onChange 이벤트를 사용합니다:
import React, { useState } from "react";
import ReactPlayer from "react-player";
const Video = () => {
const [videoFilePath, setVideoFilePath] = useState(null);
const handleVideoUpload = (event) => {
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};
return (
<div className='player-wrapper'>
<input type="file" onChange={handleVideoUpload} />
<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />
</div>
);
};
방법 3: 정적 파일의 올바른 배치
비디오 (및 기타 미디어)와 관련된 모든 정적 파일이 public 폴더 내에 배치되어 있는지 확인하는 것이 중요합니다. 다른 위치에 배치하면 구문 분석 문제가 발생할 수 있습니다.
코드에서 비디오 파일을 올바른 파일 경로를 사용하여 참조하는지 확인하십시오:
<ReactPlayer
playing
url='video1.mp4'
height='500px'
width='800px'
controls={true}
/>
방법 4: 로컬 비디오 파일 가져오기
원하는 경우 로컬 비디오 파일을 직접 React 컴포넌트에 가져올 수도 있습니다:
import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-1.MP4';
class Video extends Component {
render () {
return (
<div className='player-wrapper'>
<ReactPlayer
url={myVideo}
// ...
/>
</div>
);
}
}
방법 5: Video HTML 요소 사용하기
또 다른 방법으로는 Video HTML 요소를 사용하여 React.js에서 로컬 비디오를 재생할 수 있습니다. 특히 썸네일과 같은 기능에 대해 더 많은 제어를 원하는 경우 ReactPlayer가 모든 시나리오에 적합하지 않을 수 있습니다.
class Video extends Component {
render() {
return (
<div className='player-wrapper'>
<video controls src='/Slam Dunk Contest 2008.mp4' poster='video_thumbnail.png' width="820">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="https://example.com/video.mp4">download it</a> and watch it with your favorite video player!
</video>
</div>
);
}
}
결론
React.js에서 로컬 비디오를 재생하는 것은 비디오 파일을 public 폴더에 배치하거나 비디오 객체 URL을 활용하거나 정적 파일을 올바르게 배치하거나 로컬 비디오 파일을 직접 가져오거나 Video HTML 요소를 사용하는 등 다양한 방법을 통해 수행할 수 있습니다. 프로젝트 요구사항에 가장 적합한 방법을 선택하세요.
이러한 기술을 따르고 react-player 모듈의 강력함을 활용하면 React.js 애플리케이션에 로컬 비디오를 원활하게 통합할 수 있습니다.
