const video = document.querySelector("video");
const playBtn = document.getElementById("play");
재생중일때는 눌렀을때 멈춰야 됨 → HTMLMediaElement.pause() 메소드로 가능
HTMLMediaElement.paused 메소드는 현재 video가 재생중 일때는 false 멈춰 있을때는 true를 반환함.
const handlePlayClick = e => {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
playBtn.addEventListener("click", handlePlayClick);
const handlePause = () => {
playBtn.innerText = "play";
};
const handlePlay = () => {
playBtn.innerText = "pause";
};
video.addEventListener("pause", handlePause);
video.addEventListener("play", handlePlay);
const handlePlayClick = e => {
if (video.paused) {
video.play();
} else {
video.pause();
}
playBtn.innerText = video.paused ? "Play" : "Pause";
};
음소거가 안돼야함 → HTMLMediaElement.muted = false
ineerText가 Mute가 돼야함
volum이 0.5가 돼야함
const volumeRange = document.getElementById("volume");
const handleMute = e => {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
muteBtn.innerText = video.muted ? "Unmute" : "Mute";
volumeRange.value = video.muted ? 0 : 0.5;
};
muteBtn.addEventListener("click", handleMute);
volumeRange.addEventListener("input", handleVolumnChange);
const handleVolumnChange = e => {
const {
target: { value },
} = e;
volumeValue = value;
video.volume = volumeValue;
};
volumeRange.addEventListener("input", handleVolumnChange);
const handleMute = e => {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
muteBtn.innerText = video.muted ? "Unmute" : "Mute";
volumeRange.value = video.muted ? 0 : volumeValue;
};
const handleVolumnChange = e => {
const {
target: { value },
} = e;
if (parseFloat(value) === 0) {
video.muted = true;
} else {
video.muted = false;
}
muteBtn.innerText = video.muted ? "Unmute" : "Mute";
volumeValue = value;
video.volume = volumeValue;
};
const handleLoadedMetadata = () => {
totalTime.innerText = Math.floor(video.duration);
};
video.addEventListener("loadedmetadata", handleLoadedMetadata);
const handleTimeUpdate = () => {
currentTime.innerText = Math.floor(video.currentTime);
};
video.addEventListener("timeupdate", handleTimeUpdate);
const formatTime = seconds =>
new Date(seconds * 1000).toISOString().substr(11, 8);
YYYY-MM-DDTHH:mm:ss.sssZ
형식으로 바뀐다.const formatTime = seconds =>
new Date(seconds * 1000).toISOString().substr(11, 8);
const handleLoadedMetadata = () => {
totalTime.innerText = formatTime(Math.floor(video.duration));
};
const handleTimeUpdate = () => {
currentTime.innerText = formatTime(Math.floor(video.currentTime));
};
video.readyState가 4라는 뜻은 video가 충분히 불러와져서 사용이 가능하다는 뜻
if (video.readyState == 4) {
handleLoadedMetadata();
}
video마다 총시간이 다르기 때문에 max는 설정 안함.
input(type="range", value=0, step="1", min="0")#timeline
const handleLoadedMetadata = () => {
totalTime.innerText = formatTime(Math.floor(video.duration));
timeline.max = Math.floor(video.duration);
};
video.addEventListener("loadedmetadata", handleLoadedMetadata);
const handleTimeUpdate = () => {
currentTime.innerText = formatTime(Math.floor(video.currentTime));
timeline.value = Math.floor(video.currentTime);
};
video.addEventListener("timeupdate", handleTimeUpdate);
const handleTimelineChange = e => {
const {
target: { value },
} = e;
video.currentTime = value;
};
timeline.addEventListener("input", handleTimelineChange);
const handleFullScreen = () => {
const fullScreen = document.fullscreenElement;
if (fullScreen) {
document.exitFullscreen();
fullScreenBtn.innerText = "Enter Full Screen";
} else {
videoContainer.requestFullscreen();
fullScreenBtn.innerText = "Exit Full Screen";
}
};
fullScreenBtn.addEventListener("click", handleFullScreen);
const handleMouseMove = e => {
videoControls.classList.add("showing");
};
video.addEventListener("mousemove", handleMouseMove);
video에서 마우스가 빠져 나갔을 때 바로 showing class를 삭제하는게 아니라 조금 텀을 주고 삭제해야 더 부드럽게 보임.
const handleMouseLeave = () => {
setTimeout(() => {
videoControls.classList.remove("showing");
}, 3000);
};
video.addEventListener("mouseleave", handleMouseLeave);
let controlsTimeout = null;
const handleMouseMove = e => {
if (controlsTimeout) {
clearTimeout(controlsTimeout);
controlsTimeout = null;
}
videoControls.classList.add("showing");
};
const handleMouseLeave = () => {
controlsTimeout = setTimeout(() => {
videoControls.classList.remove("showing");
}, 3000);
};
video.addEventListener("mousemove", handleMouseMove);
video.addEventListener("mouseleave", handleMouseLeave);
let controlsMovementTimeout = null;
const hideContorls = () => videoControls.classList.remove("showing");
const handleMouseMove = e => {
if (controlsTimeout) {
clearTimeout(controlsTimeout);
controlsTimeout = null;
}
if (controlsMovementTimeout) {
clearTimeout(controlsMovementTimeout);
controlsMovementTimeout = null;
}
videoControls.classList.add("showing");
controlsMovementTimeout = setTimeout(hideContorls, 3000);
};
video.addEventListener("mousemove", handleMouseMove);