오늘은 재생바를 구현했다.
간단할줄 알았는데,,, 해야할게 너무 많았다.
우선, 재생됨에 따라 재생바가 흰색으로 채워져야했고 그에 따라서 동그란아이콘(?)도 따라와야되고
재생바에 커서를 올렸을때 해당 위치에 대한 시간,,
그리고 그곳으로 이동할 수 있게끔 만들기도 해야되고,,
저 흰색 부분이 채워지는 것은 퍼센트로 계산해서 해당 시간에 대략 몇퍼센트 채워졌는지를 계산한 로직을 대입했다.
시간을 나타내는 부분은 pageX 위치를 보고 계산해서 구할 수 있었다.
여러 좌표값이 있는데 이 짤(?)을 보고 pageX나 clientX로 구하는 것이 적합하겠다고 생각했고 pageX 값을 사용했다.
동영상 시간 구하는 함수는 utils 컴포넌트를 따로 만들어서 분리하였다.
댓글