오늘 만들어볼 기능은 크게 2가지 입니다.
1. volume 버튼을 눌렀을 때 mute, unmute 기능
2. input[type=range]를 이용해서 volume 조절하기
youtube
|views
|mixins
*|videoPlayer.pug
|assets
|js
*|videoPlayer.js
span.volume
span#jsVolumeIcon
i.fas.fa-volume-up
input#jsVolumeRange(type="range", min = 0, max = 100, value=50)
const videoPlayer = document.querySelector("#jsVideoPlayer");
const volumeIcon = document.querySelector("#jsVolumeIcon");
const volumeRange = document.querySelector("#jsVolumeRange");
function init(){
videoPlayer.volume = 0;
volumeIcon.addEventListener("click", handelVolumeClick);
volumeRange.addEventListener("input", handleVolume);
}
function handleVolumeClick(){
if(videoPlayer.muted){
videoPlayer.muted = false;
volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
volumeRange.value = videoPlayer.volume*100;
if(videoPlayer.volume === 0){
volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
}else if(videoPlayer.volume <= 0.3){
volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
}else{
volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
}
volumeRange.style.background ='linear-gradient(to right, white 0%, white ' + volumeRange.value + '%, rgba(173, 167, 167, 0.6) ' + volumeRange.value + '%, rgba(173, 167, 167, 0.6) 100%)';
}else{
videoPlayer.muted = true;
volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
//muted를 했어도 videoPlayer는 volume값을 저장하고 있다.
volumeRange.value = 0;
volumeRange.style.background = 'rgba(173, 167, 167, 0.6) 100%)';
}
}
function handleVolume(){
const {target:{value}} = event;
// 0과 1사이의 값을 넣어주어야 합니다.
videoPlayer.volume = value/100;
if(videoPlayer.volume === 0){
volumeIcon.innerHTML = '<i class="fas fa-volume-mute"></i>';
}else if(videoPlayer.volume <= 0.3){
volumeIcon.innerHTML = '<i class="fas fa-volume-down"></i>';
}else{
volumeIcon.innerHTML = '<i class="fas fa-volume-up"></i>';
}
this.style.background = 'linear-gradient(to right, white 0%, white ' + value + '%, rgba(173, 167, 167, 0.6) ' + value + '%, rgba(173, 167, 167, 0.6) 100%)';
}
if(videoPlayer){
init();
}