1. 스팩 정의

기능 스팩

1. 아래와 같은 영상을 띄운다.

   

2. 현재 얼마나 재생했는 지를 보여주는 progrssbar, 배속 버튼, 언어 선택 버튼이 있다.

3. Prograssbar를 눌러서, 시간을 이동할 수 있다.

개발 스팩

1. 라이브러리에 대한 의존성 최소화 및 video태그에 익숙해지고자 video 태그를 이용한다.
2. 프로그래스바에서 특정 영역을 클릭시, 해당 영역이 전체에서 어느 부분인 지 체크하여, 해당 시간으로 영상을 이동한다.

2. 개발

개발 구상

1. 관리할 상태값 : 현재 시간(currentTime), 전체 시간(duration), 배속(playbackRate)
2. onLoadedMetedata를 이용하여, 전체 시간을 업데이트한다.
3. onTimeUpdate를 이용하여, 현재 시간을 업데이트한다.
   • 2,3번의 현재 시간/전체 시간을 이용하여 상태바를 보여준다.
4. select 버튼을 이용하여 배속을 업데이트한다.
5. 프로그래스바에 onClick을 추가하여, 클릭 시 현재 비디오의 재생 시간을 수정한다.

개발