비디오 플레이어 도입하는 법

우리팀 서비스는 숏폼이 핵심 기능이었기 때문에 최대한 기획과 디자이너분들이 원하는 프레임으로 맞춰야 했다.

비디오 플레이어를 우리가 제작해서 넣는거는 시간이 너무 오래 걸릴 것 같아서 생각했던게 임베디드 방식이다.

사람들이 제일 많이 사용하는 유튜브!를 생각했었는데 유튜브는 임베디드하면 유튜브로고가 뜨고 여러가지 ui가 우리의 서비스와 맞지 않았다. 그래서 고민하다가 찾아낸 방식이

dailymotion이용하기!!

 

1.제일 먼저 생각했던게 react-player사용하기였다

2.react-player를 설치하여 dailymotion비디오 링크만 첨부하면 됬는데...

3.css를 마음대로 설정못하고, 자동재생 컨트롤도 못하고 무엇보다도 바로 다음 영상으로 넘어간다는 게 큰 문제점이었다

3.react-player만 믿고 당당하게 구현해내겠다고 외쳤는데 막상....제대로 작동을 안하니까 심장이 쿵...

4.그래서 생각해낸 해결책이 바로 dailymotion 내에서 자체적으로 임베디드 기능을 제공 해주는 서비스를 사용하기였다

5.partnerHQ만 가입하면(무료) 

이런식으로 플레이어 설정만 하면 알아서 iframe,embedded,library를 제공해준다! dailymotion dev page에 자세히 나와있으니까 필요하면 꼼꼼히 읽어보세요!

7.당연히 embedded를 사용할라 했는데 html 형식의 파일에서만 된다 그래서 어쩌지 했는데 그냥 iframe을 사용하면 되는 것이었다

<iframe src="https://geo.dailymotion.com/player/xbi7j.html?video={여기에 video 아이디만 넣어주면 끝!}" 

8.코드

useEffect(() => {

    if (typeof window !== undefined) {

      setHasWindow(true);

    }

    fetchUser();

  }, [fetchUser]);

<Vid>

        {hasWindow && (

          <iframe

            src={`https://geo.dailymotion.com/player/xbi7j.html?video=${data && data.video_id}`}

            allow="autoplay;"

            width="100%"

            height="720px"

            allowFullScreen></iframe>

        )}

      </Vid>

9.완성화면(저 speed는 무시해주세요..제 컴퓨터에 내장되어있는 기능..ㅎㅎ입니다..)