typescript 에서 video 붙일 때 에러 해결하기!

react typescirpt 에 평범한 방법으로 비디오를 붙였을 뿐인데 TS2307: Cannot find module '../assets/videos/sample.mp4' or its corresponding type declarations. 이런 에러 났을 때 참조

 

 

1. 비디오를 assets/videos 폴더 안에 넣는다

2. tsconfig.json 중괄호 안에 "typeRoots": ["videos "] 를 추가

  {
     "compilerOptions" : ...
     "typeRoots":["videos"]
  }

3. assets/videos 폴더 안에 videos.d.ts 파일을 넣는다 (파일 안에는 동영상 확장자의 타입 선언)

declare module '*.mov'; 
declare module '*.mp4';

4. 페이지에 일반적인 소스 적용

muted 걸어야 동영상 autoPlay 가능함 (브라우저 정책 때문)

<video height="600" width="400" muted autoPlay loop controls>
    <source src="/assets/videos/sample.mp4" type="video/mp4"></source>
</video>

 

 

 

 

참조

https://velog.io/@fopa72/tsx%EC%97%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B6%94%EA%B0%80%ED%95%A0-%EB%95%8C-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-TypeScript

tsx에 이미지 추가할 때 오류 해결 방법 [TypeScript]

 

swiper 배너에 비디오 넣기

https://codepen.io/intotheprogram/pen/qBRmRKj

Swiper｜Play Pause Video