728x90
1. 터미널에서
npm i react-player
2.import 하기
import ReactPlayer from 'react-player/lazy';
3. 코드작성
<ReactPlayer
className='react-player'
url={process.env.PUBLIC_URL + '/videos/traveling.mp4'} //플레이어 url
>> 나는 public 폴더 내에 videos폴더를 만들었다.
width='100%' // 플레이어 크기 (가로)
height='80%' // 플레이어 크기 (세로)
>> px로 고정값을 해도 되고, %로 반응형으로 해도 된다.
playing={false} // 자동 재생 on
muted={false} // 자동 재생 on
controls={true} // 플레이어 컨트롤 노출 여부
/>
728x90
'Development' 카테고리의 다른 글
[react] 1. 도구 설치 (1) | 2023.10.02 |
---|---|
[PHP] xampp 설치 (0) | 2023.03.09 |
[react]gitPage 무료 웹페이지 만들기 (0) | 2023.02.02 |
[react] 2.프론트엔드 만들기 (0) | 2023.01.23 |
[react] 1. server 만들기 (0) | 2023.01.22 |