[WillBe 화상 면접 커뮤니티] React Player를 통한 custom player만들기 (1)

이번에는 유저들의 면접 영상을 재생할 때 구현했던 플레이어 제작 과정을 소개하고자 한다. 플레이어를 제작하기 위한 사용한 라이브러리는 React Player이다. 다양한 API를 제공하고, 많은 개발자가 사용하며 최근까지도 업데이트가 활발이 되고 있어 선택하게 되었다. 추가적으로 플레이어에서 재생바 역할을 하는 부분만 스타일 잡는데 줘야 할 값들이 너무 많아 시간이 오래 소요될 것을 우려하여 mui의 Slider를 가져와서 사용하였다. 플레이어에 있는 기능은 Youtube와 Vimeo에 있는 기능을 넣으려고 노력하였다. 구현한 기능은 아래와 같다. 1. 재생, 멈춤 2. 3초 앞, 3초전 3. 소리 조절 + 음소거 4. 배속 (0.5배속, 1배속, 1.5배속, 2배속) 5. 전체화면 6. 재생시간 툴팁으..
Frontend/Projects 2022. 5. 23. 14:49
1