[웹] 리액트 동영상 재생

📝 수강하기를 누르면 강의 영상이 나와야하므로 영상 재생이 필요하다.

---

💫 embed 태그 | iframe 태그 | video 태그

✔️ embed 태그는 외부 콘텐츠를 사용할 수 있도록 설정해주는데, 현재 대부분의 최신 브라우저는 플러그인 지원을 중단하고 있어서 권하지 않는다고 한다.

✔️ iframe은 설정한 크기의 공간을 만들어놓고, 그 안에 다른 사이트나 다른 페이지의 소스를 불러와서 보여주는 역할을 하기 때문에 보통 유튜브 영상을 보여줄 때 사용한다.

✅ 따라서 video 태그를 사용하기로 했다.

<video width='360' height='280' controls="controls">
    <source src="../ㄱ.mp4"type="video/mp4"/>
</video>

🚨 영상로드가 되지 않는 오류가 발생했다.
-->🧭 나와 같은 오류를 격고 있는 사람을 발견했고, 두가지 해결법이 있었다.
1. video를 import 해주기
2. require 함수 사용하기

import video from "../ㄱ.mp4";
<video width='360' height='280' controls="controls">
     <source src={video} type="video/mp4"/>
</video>

<video width='360' height='280' controls="controls">
     <source src={require("../ㄱ.mp4")} type="video/mp4"/>
</video>

❓ 두개가 뭐가 다른데? -> import vs require

• require는 node.js문이고, import는 ES6에서 사용된다.
• require는 프로그램의 어느 지점에서나 호출할 수 있지만, import는 파일의 시작 부분에서만 실행할 수 있다.
• 두 키워드 모두 다른 파일을 불러온다는 동일한 목적을 가지고 있지만 다른 문법구조를 가지고 있고, Babel과 같은 ES6 코드를 변환해주는 도구 없이는 require을 사용해야 한다.

✅ 두가지 해결법 중 어떤 방법이 더 좋은 방법인지는 잘 모르겠지만, 모듈을 사용하는 것이 아니기 때문에 많은 차이는 없을 것이라 생각한다.

---

참고

• [React] 프로젝트에 동영상을 넣고싶어요
• CommonJS 와 ES(6) 모듈 키워드 ( require vs import ) 차이