Development

[react] 동영상 삽입하기

mefd 2023. 2. 21. 21:20
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