📝 오늘 한 것

1. 복습 - video player

📚 배운 것 (복습)

브라우저 창 크기 줄이면 html 크기보다 넘치는 부분 제어
video player

+watch 페이지 CSS 스타일링
실제 코드는 github에 올림(wetube_v2)

8. VIDEO PLAYER

재생 버튼 / 음소거 버튼 / 볼륨 바 / 재생 시간 / 타임라인 / 전체 화면

• [TIL] 211210

  • webpack 설정 (entry 추가 / output 변경)
  • HTML 마크업
  • playBtn
  • muteBtn

• [TIL] 211211

  • time
  • timeline
  • fullscreen
  • mouse events (아직 안함)

💡 HTML 마크업

//- watch.pug

div.video-container
video(src="/" + video.videoUrl)
div.video-player
  button.video-player__play
    i.fas.fa-play
  button.video-player__mute
    i.fas.fa-volume-up
  input.video-player__volume(type="range", value="0.3", step="0.1", min="0", max="1")
  div.video-player__time
    span.video-player__currentTime 00:00
    span  / 
    span.video-player__totalTime 00:00
  input.video-player__timeline(type="range", value="0", step="1", min="0")
  button.video-player__fullScreen
    i.fas.fa-expand

💡 video player 기능 구현

수정함 (211230)

// videoPlayer.js
const videoContainer = document.querySelector("video-container");
const video = document.querySelector("video");
const videoPlayer = document.querySelector(".video-player");
const playBtn = document.querySelector(".video-player__play");
const muteBtn = document.querySelector(".video-player__mute");
const volumeRange = document.querySelector(".video-player__volume");
const time = document.querySelector(".video-player__time");
const currentTime = document.querySelector(".video-player__currentTime");
const totalTime = document.querySelector(".video-player__totalTime");
const timeline = document.querySelector(".video-player__timeline");
const fullScreen = document.querySelector(".video-player__fullScreen");

let volumeValue = 0.3;
video.volume = volumeValue;

const handlePlayBtnClick = () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
  playBtn.innerHTML = video.paused
    ? "<i class='fas fa-play'></i>"
    : "<i class='fas fa-pause'></i>";
};

const handleMuteBtnClick = () => {
  if (video.muted) {
    video.muted = false;
  } else {
    video.muted = true;
  }
  muteBtn.innerHTML = video.muted
    ? "<i class='fas fa-volume-mute'></i>"
    : "<i class='fas fa-volume-up'></i>";
  volumeRange.value = video.muted ? "0" : volumeValue;
  video.volume = volumeValue;
};

const handleVolumeValueInput = () => {
  if (volumeRange.value === "0") {
    video.muted = true;
  } else {
    video.muted = false;
  }
  muteBtn.innerHTML =
    volumeRange.value === "0"
      ? "<i class='fas fa-volume-mute'></i>"
      : "<i class='fas fa-volume-up'></i>";
  video.volume = volumeRange.value;
};

const handleVolumeValueChange = () => {
  if (video.volume === 0) {
    return;
  }
  volumeValue = video.volume;
};

const handleVolumeChange = () => {
  if (video.volume === 0) {
    video.muted = true;
  }
  volumeRange.value = video.volume;
  muteBtn.innerHTML =
    volumeRange.value === "0"
      ? "<i class='fas fa-volume-mute'></i>"
      : "<i class='fas fa-volume-up'></i>";
};

const formatTime = (seconds) => {
  const min = String(Math.floor(seconds / 60));
  const second = String(Math.floor(seconds % 60));
  return `${min.padStart(2, "0")}:${second.padStart(2, "0")}`;
};

const handleLoadedMetadata = () => {
  currentTime.textContent = formatTime(video.currentTime);
  totalTime.textContent = formatTime(video.duration);
  timeline.max = video.duration;
};

const handleTimelineChange = () => {
  video.currentTime = timeline.value;
};

const handleCurrentTimeUpdate = () => {
  currentTime.textContent = formatTime(video.currentTime);
  timeline.value = String(Math.floor(video.currentTime));
};

const handleFullScreenClick = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    video.requestFullscreen();
  }
  fullScreen.innerHTML = document.fullscreenElement
    ? "<i class='fas fa-compress'></i>"
    : "<i class='fas fa-expand'></i>";
};

const handleVideoEnded = () => {
  video.currentTime = 0;
  playBtn.innerHTML = "<i class='fas fa-play'></i>";
};

const handleKeyDown = (event) => {
  const { key } = event;
  switch (key) {
    case " ":
      event.preventDefault();
      handlePlayBtnClick();
      break;
    case "Enter":
      event.preventDefault();
      handleFullScreenClick();
      break;
    case "ArrowRight":
      event.preventDefault();
      video.currentTime += 1;
      break;
    case "ArrowLeft":
      event.preventDefault();
      video.currentTime -= 1;
      break;
    case "ArrowUp":
      event.preventDefault();
      if (video.volume === 1) {
        return;
      }
      if (video.muted) {
        video.muted = false;
        video.volume = 0.1;
      } else {
        video.volume = (video.volume + 0.1).toFixed(1);
      }
      handleVolumeChange();
      handleVolumeValueChange();
      break;
    case "ArrowDown":
      event.preventDefault();
      if (video.muted || video.volume === 0) {
        return;
      }
      video.volume = (video.volume - 0.1).toFixed(1);
      handleVolumeChange();
      handleVolumeValueChange();
      break;
    case "m":
      handleMuteBtnClick();
      break;
  }
};

playBtn.addEventListener("click", handlePlayBtnClick);
muteBtn.addEventListener("click", handleMuteBtnClick);
volumeRange.addEventListener("input", handleVolumeValueInput);
volumeRange.addEventListener("change", handleVolumeValueChange);
video.addEventListener("loadedmetadata", handleLoadedMetadata);
timeline.addEventListener("input", handleTimelineChange);
video.addEventListener("timeupdate", handleCurrentTimeUpdate);
fullScreen.addEventListener("click", handleFullScreenClick);
video.addEventListener("ended", handleVideoEnded);
window.addEventListener("keydown", handleKeyDown);

✨ 내일 할 것

1. 복습 계속하기 - video player