📝 오늘 한 것

1. video player - currentTime / duration / input 이벤트 / fullscreen

2. mouse events - mousemove / mouseleave / mouse stop

📚 배운 것

video player

1. Time (currentTime / Duration)

1) watch.pug

div
  span#currentTime 00:00
  span  / 
  span#totalTime 00:00

2) videoPlayer.js

(1) 방법 1: 몫 / 나머지 이용

초 단위를 몫과 나머지 식을 이용해 분·초 단위로 바꾼 후 padStart()를 이용해 자리수를 맞춰주었다. (내가 사용한 방법)

const currentTime = document.getElementById("currentTime");
const totalTime = document.getElementById("totalTime");

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

const handleLoadedMetaData = () => {
  totalTime.innerText = makeVideoTime(Math.floor(video.duration));
};

const handleTimeUpdate = () => {
  currentTime.innerText = makeVideoTime(Math.floor(video.currentTime));
};

video.addEventListener("loadedmetadata", handleLoadedMetaData);
video.addEventListener("timeupdate", handleTimeUpdate);

(2) 방법 2: date formatter 이용

밀리초 단위를 date 객체로 만든 후 substr()를 이용해 분·초 단위만 잘라냈다. (강의에서 사용한 방법)

const currentTime = document.getElementById("currentTime");
const totalTime = document.getElementById("totalTime");

const formatTime = (seconds) => new Date(seconds * 1000).toISOString().substr(14, 5);

const handleLoadedMetaData = () => {
  totalTime.innerText = formatTime(Math.floor(video.duration));
};

const handleTimeUpdate = () => {
  currentTime.innerText = formaTime(Math.floor(video.currentTime));
};

video.addEventListener("loadedmetadata", handleLoadedMetaData);
video.addEventListener("timeupdate", handleTimeUpdate);

2. Timeline

1) watch.pug

max 값은 video마다 길이가 다르므로 사전에 설정하지 않는다.

input(type="range", step="1", value="0", min="0")#timeline

2) videoPlayer.js

(1) 비디오 시간이 변할 때마다 타임라인이 움직이도록

먼저, video의 metadata가 로드되면 video의 길이를 받아와서 이를 input의 max 값으로 설정해준다.

video가 재생을 시작하면 video 시간에 맞춰 타임라인 상의 포인터가 이동하도록 video.currentTime이 timeline.value의 값이 되도록 한다.

const timeline = document.getElementById("timeline");

const handleLoadedMetaDate = () => {
  totalTime.innerText = formatTime(Math.floor(video.duration));
  timeline.max = Math.floor(video.duration); // 추가 ❗
};

const handleTimeUpdate = () => {
  currentTime.innerText = formatTime(Math.floor(video.currentTime));
  timeline.value = Math.floor(video.currentTime); // 추가 ❗
};

video.addEventListener("loadedmetadata", handleLoadedMetaData);
video.addEventListener("timeupdate", handleTimeUpdate);

(2) 타임라인이 움직일 때마다 비디오 시간이 변하도록

input 이벤트를 이용해 타임라인 상에서 포인터를 이동시킬 때마다 timeline.value가 video.currentTime의 값이 되도록 한다.

const timeline = document.getElementById("timeline");

const handleTimelineChange = (event) => {
  const { target: { value} } = event;
  video.currentTime = value;
};

timeline.addEventListener("input", handleTimelineChange);

3. Fullscreen

MDN - Using fullscreen mode 참고

1) watch.pug

div
  button#fullScreen Enter Full Screen

2) videoPlayer.js

element.requestFullscreen()을 이용해 해당 요소를 전체 화면으로 만들고, document.exitFullscreen()을 이용해 전체 화면을 원래대로 되돌릴 수 있다.

이때 video.requestFullscreen()을 사용하면 video만 전체 화면이 된다.
컨트롤러까지 전체화면으로 만들려면 watch.pug 파일의 코드를 수정해야 한다.
비디오를 포함하여 앞서 만들어둔 모든 비디오 플레이어 관련 코드를 div#videoContainer 안에 넣어줬다.

document.fullscreenElement는 전체 화면 상태일 때는 그 요소를 반환하고, 전체 화면 상태가 아닐 때는 null을 반환한다.

const fullScreenBtn = document.getElementById("fullScreenBtn");

const handleFullscreen = () => {
  const fullscreen = document.fullscreenElement;
  if (fullscreen) {
    videoContainer.requestFullscreen();
    fullScreenBtn.innerText = "Exit Full Screen";
  } else {
    document.exitFullscreen();
    fullScreenBtn.innerText = "Enter Full Screen";
  }
};

fullScreenBtn.addEventListener("click", handleFullscreen);

4. Mouse Events

마우스 커서를 비디오 위에 올리면 비디오 컨트롤러를 보여주고, 마우스 커서를 비디오 밖으로 이동 후 3초가 지나면 비디오 컨트롤러를 숨겨줄 것이다.

비디오 안에서도 마우스가 계속 움직인다면 비디오 컨트롤러를 보여주고, 마우스 커서가 3초 동안 움직이지 않느다면 비디오 컨트롤러를 숨겨줄 것이다.

1) watch.pug

div#videoContainer
  video(src="/" + video.fileUrl, widht="800")
  div#videoControls
    button#playBtn Play
    button#muteBtn Mute
    div
      span#currentTime 00:00
      span  / 
      sapn#totalTime 00:00
    input(type="range", step="0.1", value="0.3", min="0", max="1")
    input(type="range", step="1", value="0", min="0")
    div
      button#fullScreenBtn Enter Full Screen

2) videoPlayer.js

(1) mousemove / mouseleave

class를 이용해 css 스타일을 적용시키려고 한다.
일단 마우스 커서를 비디오 위로 올리면 'showing' class가 추가되도록 하고, 밖으로 이동 후 3초가 지나면 삭제되도록 한다.

const videoControls = document.getElementById("videoControls");

// 마우스 커서를 비디오 위로 올리면
const handleMouseMove = () => {
  videoControls.classList.add("showing");
};

// 마우스 커서를 비디오 밖으로 이동하면
const handleMouseLeave = () => {
  setTimeout(() => {
    videoControls.classList.remove("showing");
  }, 3000);
};

video.addEventListener("mousemove", handleMouseMove);
video.addEventListener("mouseleave", handleMouseLeave);

(2) clearTimeout()

그러나 이렇게만 작성하면 마우스 커서를 비디오 위로 올렸다가 밖으로 나간 후 다시 들어와도 'showing' class가 보이지 않고 사라지는 문제가 발생한다.

마우스 커서를 비디오 위로 다시 올렸을 때 'showing' class가 남아있도록 하려면, 마우스 커서를 비디오 위로 다시 올렸을 때 clearTimeout()을 이용해 setTimeout()을 취소해야 한다.
이를 위해서는 timer를 공유해야 한다.

const videoControls = document.getElementById("videoControls");

let controlsTimeout = null;

const handleMouseMove = () => {
  videoControls.classList.add("showing");
  if (controlsTimeout) {
    clearTimeout(controlsTimeout);
    controlsTimeout = null;
  }
};

const handleMouseLeave = () => {
  controlsTimeout = setTimeout(() => {
    videoControls.classList.remove("showing");
  }, 3000);
};

video.addEventListener("mousemove", handleMouseMove);
video.addEventListener("mouseleave", handleMouseLeave);

(3) mouse stop

비디오 안에서 마우스가 계속 움직인다면 비디오 컨트롤러를 계속 보여주면 되지만, 비디오 안에서도 마우스 커서가 3초 동안 움직이지 않는다면 비디오 컨트롤러를 숨겨줘야 한다.

mousestop이라는 이벤트는 없기 때문에 mousemove 이벤트 리스너 안에서 setTimeout()과 clearTimeout()을 이용해야 한다.

const hideControls = () => videoControls.classList.remove("showing");

// 1. 마우스 커서를 비디오 위로 올리면
const handleMouseMove = () => {
  // 중략
  
  if (mouseMoveTimer) { // 4. 그러나 3초가 되기 전에 마우스를 움직이면
    clearTimeout(mouseMoveTimer); // 5. showing class를 삭제하는 3초 타이머가 취소되고
    mouseMoveTimer = null;
  }
  videoControls.classList.add("showing"); // 2. showing class가 추가됨 // 6. 여전히 showing class가 부여된 상태
  mouseMoveTimer = setTimeout(hideControls, 3000); // 3. 마우스 커서를 움직이지 않고 3초가 지나면 showing class가 삭제됨
};

즉, 비디오 안에서 마우스를 움직일 때마다 컨트롤러를 삭제하는 setTimeout 함수를 만들고 있지만, 마우스가 계속 움직이면 바로 전에 만든 그 함수를 계속 삭제하기 때문에 컨트롤러가 유지되는 것이다.
마우스가 계속 움직이면 hideControls 함수가 채 실행되기 전에 setTimeout 함수가 삭제된다.
컨트롤러를 삭제하려면 3초 동안 마우스 커서가 움직이지 않아야 한다.

✨ 내일 할 것

1. 복습