JavaScript key down button for volume range on video

videoPlayer.js

videoPlayer.pug

  volume up & down의 keyboard 단축키는 화살표 위 아래다. keyCode 값이 위 방향은 38, 아래 방향은 40이다. volumeRange의 범위는 min=0, max=1, step=0.1이다. 

handlekeydown()

  JS의 소수점 계산은 값이 정확하지가 않다. 그렇기 때문에 +0.1와 -0.1 계산을 하다보면 그림과 같이 오차가 생긴다.

JS float 계산 오차

 이러한 문제점을 해결하기 위해 다음과 같이 Math.floor() 계산을 해줘야 한다.

 

그 이후에 handleVolumeRange()가 parameter 받을 수 있도록 객체를 생성하고 parameter를 넘겨준다.

handleKeydown()

화살표 위 아래 방향은 scroll에 영향을 미치기 때문에 preventDefault()를 해줘야 한다.

소스 코드

github.com/zpskek/wetube-v3/commit/ead9c4299d93bf7e0473dad11671bdf6c5e3e2c3