[JavaScript30] Day11: Custom HTML5 Video Player

무엇을 만들 것인가.

비디오 플레이어의 컨트롤 부분이 다음과 같이 동작하도록 구현하는 것이 오늘의 목표다.

1. 비디오 클릭 시 재생/일시정지
2. 재생 버튼 클릭 시 일시정지 / 일시정지 버튼 클릭 시 재생
3. 오디오 볼륨 조절
4. 재생 속도 조절
5. 비디오 스킵 버튼
6. progress bar 클릭으로 원하는 부분의 비디오가 나오도록

코드를 살펴보자.

무엇을 배웠나.

video/audio 요소 활용하기

HTML DOM 요소 중 비디오와 오디오에서 활용할 수 있는 메소드, 프로퍼티, 이벤트를 활용해볼 수 있는 기회가 되었다. 이번 과제에서 사용한 것들을 기록해본다. 더 많은 내용은 여기서.

function handleProgress() {
  // currentTime과 duration 프로퍼티
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

video.addEventListener("timeupdate", handleProgress); // timeupdate 이벤트

methods

• play() : Starts playing the audio/video
• pause() : Pauses the currently playing audio/video

properties

• played : Returns a TimeRanges object representing the played parts of the audio/video
• paused : Returns whether the audio/video is paused or not
• currentTime : Sets or returns the current playback position in the audio/video (in seconds)
• duration : Returns the length of the current audio/video (in seconds)
• volume : Sets or returns the volume of the audio/video
• playbackRate : Sets or returns the speed of the audio/video playback

events

• timeupdate : Fires when the current playback position has changed

togglePlay() 함수

togglePlay 함수는 이벤트 발생 시 비디오를 재생 또는 일시정지시키는 기능을 한다.

function togglePlay() {
    if (video.paused) { // paused 프로퍼티
    video.play(); // play() 메소드
  } else {
    video.pause(); // pause() 메소드
  }
}

위의 코드를 좀 더 간단히 삼항 연산자를 활용하여 아래와 같이 작성할 수 있었다. 위의 경우에는 점 표기법으로 비디오 요소의 메소드를 사용했지만 아래와 같은 경우는 메소드 이름으로 변수가 들어가기 때문에 대괄호를 사용해야 했다. 대괄호로 변수를 감싸 불러오고자 하는 메소드명을 불러온 뒤 바로 소괄호를 사용한 것이 인상적이었다. 기억해서 나중에도 써먹어보자!

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

parseFloat()

parseFloat() 메소드는 문자열을 아규먼트로 받아 부동 소수점 숫자(float point number)를 반환한다.

function skip() {
  console.log(this.dataset.skip);
  video.currentTime += parseFloat(this.dataset.skip);
}

여기에 예제가 잘 나와있으니 참고하자.

dataset 프로퍼티

비표준 속성을 다룰 때에는 dataset 프로퍼티를 사용한다. data-로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장된다. data-skip라는 속성은 element.dataset.skip 프로퍼티에 접근하여 가져올 수 있다.

<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>

function skip() {
  console.log(this.dataset.skip);
  video.currentTime += parseFloat(this.dataset.skip);
}

비표준 속성을 다루는 연습을 JavaScript30 챌린지 초반에도 한 적이 있었는데 그때도, 지금도 참 새롭고 재밌고 신기하다. 비표준 속성을 잘 활용하면 코드를 효율적으로 잘 작성해볼 수 있을 것 같다. 이전에 강의 들으면서 비표준 속성에 대해 정리해두었는데 여기에 있으니 참고하며 잘 활용해봐야겠다.

무엇을 느꼈나.

비디오 요소에서 활용할 수 있는 메소드, 프로퍼티, 이벤트들을 어떻게 활용하는지 직접 구현을 통해 배우며 새롭게 배웠다.

기능별로 나누어 차근차근 코드를 써내려가면 그렇게까지 어려울 것은 없는 것 같다. 마지막 프로그레스 바에 이벤트 핸들러 적용하는 부분은 스스로 생각하기 어려운 부분이었는데 많이 연습하다보면 익숙해지지 않을까 싶다.

참고

• HTML Audio/Video DOM Reference
• MDN - parseFloat()
• [Javascript] 문자열 숫자로 변환하기 (2) - parseFloat()