[React] 간단하게 유튜브 동영상 가져오기 (react-player)

react-player 란 라이브러리를 활용해 유튜브 동영상을 간단하게 가져올수 있다.

npm install react-player
or yarn add react-player 로 라이브러리 설치

import ReactPlayer from "react-player";

import부터 해준다

function App() {
  return (
    <div className="App">
      <ReactPlayer
        className="player"
        url={"해당 영상 URL"}
        width="700px"
        heigth="700px"
        playing={true}
        muted={true}
        controls={true}
      />

      <h1 style={{ color: "white" }}>VIDEO</h1>
    </div>
  );
}

컴포넌트처럼 간단하게 사용해주면 끝이다

속성

• url - 가져오고 싶은 영상 url 설정
• width, height - 가로, 세로 길이 설정해주기
• playing - true면 자동재생
• muted - true면 재생 되었을때 음소거 설정이 디폴트이다
• controls - true이면 유튜브 플레이어 ui를 그대로 가져옴
  (playing, muted 속성이 ture여야만 자동재생 함!)

자동재생 되었을때 음소거로 영상이 재생되는것이 맘에 들지않아 고쳐보려고 검색해봤지만 Chrome 66 버전부터 동영상이 음소거로 되어있어야만 자동으로 재생이 된단다.
따라서 playing, muted 속성이 true로 꼭 되있어야 하나보다
하긴 무심코 들어갔다가 소리때문에 깜짝 놀란적이 많아 좋은정책인거 같다

간단하게 유튜브 동영상만 불러오고 싶다면 기제한 속성만 주어도 충분할거 같다!!!

자세한 사용법은 https://www.npmjs.com/package/react-player

수정 : ReactPlayer 속성중에 controls 속성과 playing 속성을 이렇게 주면 자동재생도 되고 디폴트로 음소거도 되지않는다! 이왜진......??????????????????

<ReactPlayer
	className="player"
	url={""}
    controls
    playing={true}
    width="500px"
    height="400px"
/>