[React] <video> 태그를 이용한 동영상 재생하기

동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다!

 

만약 동영상으로 화면 전체를 채우고 싶다면! 참고!

2022.06.25 - [Programming/CSS] - [CSS] Styled-components + 동영상으로 화면 전체 채우기

[CSS] Styled-components + 동영상으로 화면 전체 채우기

 

728x90

 

---

 

React 동영상 재생하기

1. public 폴더 하위에 동영상 파일 추가 (.mp4가 아닌 파일은 적용되지 않는걸까.. 여튼 .mov는 되지 않는다!)
2. <video> 태그를 이용한 코드 작성 : muted(소리 없음), autoPlay(자동 재생), loop(반복) 속성 적용

* 동영상 파일 경로 : public/videos/Preview.mp4

* react-player라는 라이브러리도 있던데.. 나중에 알아봐야겠다!

 

전체 코드

import React from "react";

const Intro = () => {
    return (
        <video muted autoPlay loop>
            <source src="/videos/Preview.mp4" type="video/mp4" />
        </video>
    )
}

export default Intro;