JavaScript video volume range button

videoPlayer.js

videoPlayer.pug

videoPlayer.js

  handleVolumeClick에 빨간색 코드를 추가했다. 이제 음소거를 하면 실제 video volume의 range 값이 0이 되고 음소거를 풀면 videoPlayer에 있는 volume 값을 대입함으로써 range값을 되돌린다.

handleVolumeRange

  volumeRange 값을 변경할 때 마다 input event가 발생한다. 그 때 마다 handleVolumeRange를 실행시킨다. 이 함수는 e.target.value의 값을 videoPlayer.volume에 대입한다. 그리고 value 값이 변경되어 특정 값 범위에 포함될 때 icon을 변경한다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• HTMLMediaElement API MDN

소스 코드

https://github.com/zpskek/wetube-v3/commit/06376cf02babde52e38bdcf3add45a3214e65493