Video Player

1. 우선 설정

 - 브라우저에서 제공받은 플레이어를 가지고 있지만 너무 기본적임

 - 하지만 어떤 스타일도 적용할 수 없고 바꾸려면 우리가 직접 만들어야 함

 - HTML CSS 자바스크립트까지 전부 만들어야 함

 - 먼저 작동은 되지만 못생긴 자바스크립트를 만들거임

 - 그다음 CSS를 사용하여 예쁘게 바꿀거임

 - 그전에 webpack이 어떻게 설정됐는지 봐야함

 - client의 main.js는 base.pug에 의해 모든 페이지에 포함되어있음

 - 여기서 문제는 비디오 플레이어를 만들어 보는건데, 비디오 플레이어 코드를 검색화면에 로드하는게 말이 되는지가 중요함

   - 별로 좋지 않음

 - 다른 자바스크립트 파일을 만들어서 그 놈을 다른 페이지에 포함시킬거임

   - 홈페이지에서는 어떤 자바스크립트도 로드하지 않고, 비디오 페이지에 가면 그때 비디오 플레이어 코드를 로드

   - 비디오 업로드 페이지에 가면 비디오 녹화 코드를 로드

 - 현재 우리의 webpack은 entry point를 한개만 가지고 있음

 - output에도 이름이 있는데, 모든 것들이 main.js로 변하는걸 원치 않음

 - 이제 videoPlayer.js를 비디오 플레이어가 필요한 비디오 페이지에 로드해야 함

   - 현재 우리의 경우 watch페이지에서 영상을 재생하므로 유일하게 필요함

 - videoPlayer.js의 콘솔로그는 출력이 되고 main.js의 콘솔로그는 출력이 안되므로 잘 되고 있는거임

 - 비디오 플레이어를 만들어야 하는데 그전에 pug에서 주석을 처리하는 방법이 있음

 - // 는 일반 주석이라 프론트엔드에서도 보이고, //-는 프론트엔드에서도 안보임

2. Video Player 만들기

 - 우선 HTML 마크업을 해줘야 함

 

 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

HTMLMediaElement - Web APIs | MDN

 - 우선 플레이버튼하고 음소거버튼은 간단함

3. 볼륨 조절

 - 이제 볼륨조절과 음소거버튼을 연결해야함

 - 일단은 테스트를 위해 값을 고정

 - 볼륨의 움직임을 감지하기 위해 input 이벤트 사용

let volumeValue = 0.5;
video.volume = volumeValue;
const handleMute = (event) => {
  if (video.muted) {
    video.muted = false;
  } else {
    video.muted = true;
  }
  muteBtn.innerText = video.muted ? "Unmute" : "Mute";
  volumeRange.value = video.muted ? 0 : volumeValue;
};
const handleVolumeChange = (event) => {
  const {
    target: { value },
  } = event;
  if (video.muted) {
    video.muted = false;
    muteBtn.innerText = "Mute";
  }
  volumeValue = value;
  video.volume = value;
};
volumeRange.addEventListener("input", handleVolumeChange);