ReactPlayer 로 동영상 삽입하기

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

1) 라이브러리 설치

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

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

2) 외부 url 동영상 재생

import ReactPlayer from 'react-player'

export default function BodyImage():JSX.Element {

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

2) 저장한 동영상 재생

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

더보기... 링크텍스트

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}
       />
      </>
    )
}