프로젝트에서 영상을 보여주는, 유튜브에 쇼츠형식에 view를 보여줘야 하는
부분이 많이 있었다.문제는 html에서 지원하는 iframe 과 video태그에
기본적으로 제공하는 재생버튼이나 음량 버튼이 영상의 사이즈마다
위치가 제각기 다른다는 것이었다. 그래서 Video 관련해서 재생버튼과
음량버튼 프로그레스 바를 직접 만들기로 하였다.
Steady Study
ideveloper Front end Developer who steadily study
ideveloper2.dev
해당 블로그를 참고해서 Video컴포넌트를 직접 만들어보았다.
Video 컴포넌트를 직접 만들지는 상상도 못 했지만 만들고 난 뒤에 쾌감은 말로 설명할 수가 없었다. 아직 음량조절과 재생버튼 관련해서 기능 개선이 필요한 부분이 많지만 차근차근 구현해 볼 생각이며
직접 DOM의 접근하다 보니 ref가 많이 쓰이는 부분에 있어서도 공부를 해서 개선해 나가야 할 것 같다.
'트러블슈팅' 카테고리의 다른 글
| formdata 백엔드로 보낼때 오류 트러블 슈팅 (0) | 2023.02.05 |
|---|---|
| 무한 스크롤 관련 트러블 슈팅 (0) | 2023.02.05 |
| 프로젝트 캐러셀, 슬라이드 ref 관련 트러블 슈팅 (0) | 2023.02.05 |
| 서버와 axios 통신, json방식일때 payload 상태 400에러 (0) | 2022.12.23 |
| github Permission 오류 (1) | 2022.12.12 |