[JS30] - 11) Custom Video Player

구현한 기능이지만 눈여겨 볼 부분이 있거나, 놓친 부분에 대해서만 간략히 정리했다.

비디오 재생 / 일시정지

const player = document.querySelector('.player');
const video = player.querySelector('.viewer');

function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

toggle.addEventListener('click', togglePlay)

내가 구현했던 것과 비슷하지만, 여기서는 메소드 자체를 삼항연산자로 변수지정을 한뒤 video[method]로 실행시켰다.

비디오 재생시간

HTMLMediaElement.currentTime

현재 재생시간

HTMLMediaElement.duration

전체 미디어의 길이

재생시간 변경시 재생 바 업데이트

HTMLMediaElement : timeupdate event

video.addEventListener('timeupdate', handleProgress);

재생시간이 업데이트 될 때마다 이벤트가 발생하는 조건이다.
나는 setInterval()을 이용해 비디오가 재생되면 1초씩 현재 비디오의 재생시간을 반환하고, 재생 바에 반영되도록 만들었었다.

그런데 timeupdate 이벤트로 재생시간이 바뀔 때마다 재생막대를 움직이게 되면 setInterval의 중첩과 타이머를 중단시켰다가 다시 재생해야 하는 문제가 해결이 된다.
또, 재생 바를 클릭해 영상의 재생시점을 바꾸었을 때 이 setInterval()을 중단시킨뒤 함께 시점을 이동해 시작하기도 복잡하기 때문에 이 방법이 훨씨 효율적이다.

timeupdate event에 대해 모르고 있었는데, 다양한 이벤트 조건을 먼저 찾아보고 적극적으로 활용해야겠다.

function handleRangeUpdate() {
  video[this.name] = this.value;
}

나는 event.target을 이용했는데, 여기서는 단순히 this를 이용했다.

재생 바 변경시 비디오 재생시점 이동

이 부분은 구현해보지 않았던 부분이라, 한번 다시 직접 구현해봐야겠다.

let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

재생 바의 전체 길이 대비 클릭한 지점의 x좌표 비율로 현재 시간을 구하고, currentTime에 대입해준다.

Reerence

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration