ReactPlayer 로 동영상 삽입하기

다양한 동영상의 URL을 가져와 보여줄 수 있는 ReactPlayer 입니다.

외부 영상 url을 가져오는 방법과 저장한 영상을 가져 오는 2가지 방법입니다.

1) 라이브러리 설치

사용하는 패키지 매니저에 따라 라이브러리를 설치해줍니다.

$ npm install react-player
$ yarn add react-player

 

2-1) 외부 url 동영상 재생

import ReactPlayer from 'react-player'

export default function BodyImage():JSX.Element {

    return(
      <>
       <ReactPlayer url='https://www.youtube.com/watchv=ZklnzUNDHDI'/>
      </>
    )
}

 

2-2) 저장한 동영상 재생

public - videos 에 저장한 mp4 영상을 파일 경로를 통해 동영상을 재생합니다.
동영상 재생에 필요한 설정을 할 수 있습니다.

• url: 재생할 동영상 파일의 경로를 지정
• playing:동영상이 자동으로 재생
• muted: 동영상이 음소거 상태 재생
• controls: 동영상 플레이어에 기본 제어 버튼이 표시
• loop: 동영상이 무한 반복 재생됩니다.
• https://www.npmjs.com/package/react-player

import ReactPlayer from 'react-player'

export default function BodyImage():JSX.Element {

    return(
      <>
       <ReactPlayer url={'./videos/vlog.mp4'}
        playing={true}
        muted={true}
        controls={false}
        loop={true}
       />
      </>
    )
}