📝 오늘 한 것

1. video player - webpack 설정 / playBtn / muteBtn / volume bar

📚 배운 것

video player

1. webpack 설정

1) entry / output

video player를 모든 페이지에서 로드할 필요는 없다. video가 있는 페이지에 들어갔을 때만 로드되도록 하기 위해 video player 자바스크립트 파일을 해당 파일 안에만 포함시켜줄 것이다. 이를 위해 몇 가지 과정을 거쳐야 한다.

현재 entry point는 하나뿐이다. videoPlayer.js 파일을 만든 후 오브젝트를 이용해 추가한다.
output 또한 현재는 무조건 main.js 파일에 생성되므로 이것도 webpack에서 지원하는 방식을 이용해 수정한다.

// webpack.config.json
const path = require("path");

module.exports = {
  entry: {
    main: "src/client/js/main.js",
    videoPlayer: "src/client/js/videoPlayer.js", // 추가 ❗
  },
  output: {
    filename: "js/[name].js", // 수정 ❗
    path: path.resolve(__dirname, "assets"),
  }
};

watch 페이지에 들어갔을 때 video player가 로드될 수 있도록 watch.pug 파일이 videoPlayer.js를 가져와야 한다. 즉, watch.pug 파일에 script 태그를 넣어야 한다.
이를 위해 base.pug 파일에 block scripts를 추가한 후, watch.pug 파일에서 script를 추가할 수 있다.

//- base.pug

block scripts

//- watch.pug

block scripts
  script(src="/static/js/videoPlayer.js")

💡 이때 기존에 base.pug에 있던 script(src="/static/js/main.js")를 삭제해도 에러는 발생하지 않는다.

main.js 파일은 client 폴더 안의 styles.scss 파일을 import 하는 파일로써 main.js 파일 안의 코드가 실행되는지 확인하기 위한 목적으로 console.log()와 함께 base.pug 파일에서 가져왔던 파일이다.

따라서, 이를 base.pug 파일에서 삭제하더라도 (client 폴더 안의 styles.scss 파일을 import 하는) main.js 파일만 존재한다면, webpack은 이를 확인하고 client에 존재하는 변환들을 assets에 바꿔줄 것이다.

정리하자면, output 스크립트는 css를 가져오지 않고, input 스크립트만이 css를 가져오며, 이는 webpack으로 구분된다.

2. video player 만들기

MDN - HTMLMediaElement 참고
HTMLVideoElement는 HTMLMediaElement를 상속한다. 따라서, video 태그는 HTMLMediaElement의 속성과 메서드를 사용할 수 있다.

1) HTML 마크업

watch.pug 파일에서 video player를 만든다.

//- watch.pug

block content
  video(src="/" + video.fileUrl, width="800", controls)
  div
    button#playBtn Play
    button#muteBtn Mute
    span#time 00:00/00:00
    input(type="range", step="0.1", min="0", max="1")#volume

각 요소들을 videoPlayer.js 파일로 가져온다.

// videoPlayer.js
const video = document.querySelector("video");
const playBtn = document.getElementById("plyBtn");
const muteBtn = document.getElementById("muteBtn");
const time = document.getElementById("time");
const volumeRange = document.getElementById("volume");

볼륨 bar가 미리 작성해놓은 input 설정 값 때문에 원하는 대로 보이지 않아 forms.scss를 수정했다.

// forms.scss
input:not(input[type="range"]) { ... }

2) playBtn

video.paused는 boolean 값을 return 한다.
이를 이용해 video가 재생 중인지 확인할 수 있다.

재생 여부에 따라 button 안의 text도 바꾸도록 한다.

// videoPlayer.js
const handlePlayBtnClick = (e) => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
  playBtn.innerText = video.paused ? "Play" : "Pause";
};

playBtn.addEventListener("click", handlePlayBtnClick);

3) muteBtn

(1) mute / unmute

video.muted는 boolean 값을 return 한다.
video.pasued와 달리 읽고 쓰는 것이 모두 가능하다.
즉, 음소거 상태인지 확인할 수도 있고, 음소거 상태로 만들 수도 있다.

음소거 여부에 따라 button 안의 text도 바꾸도록 한다.

// videoPlayer.js
const handleMute = () => {
  if (video.muted) {
    video.muted = false;
  } else {
    video.muted = true;
  }
  muteBtn.innerText = video.muted ? "Unmute" : "Mute";
};

muteBtn.addEventListener("click", handleMute);

(2) video.volume과 input[type="range"] 연결

실제 볼륨과 볼륨 바를 연동해야 한다.

💡 볼륨 바의 포인터를 움직일 때마다 볼륨의 크기가 변하도록

음소거 버튼을 누르면 볼륨 바의 포인터가 맨 왼쪽으로 오도록 만들어야 한다.
즉, video.volume의 값과 input[type="range"]의 value를 연결해야 한다.

이를 위해 input 이벤트를 이용할 수 있다.
volumeRange input에 input 이벤트를 등록함에 따라 input의 value 값이 변할 때마다 handleVolumeChange 이벤트 핸들러 함수가 실행된다.

// videoPlayer.js
const handleVolumeChange = (event) => {
  const { target: { value } } = event;
  video.volume = value;
};

volumeRange.addEventListener("input", handleVolumeChange);

이제 볼륨 바의 포인터를 좌우로 움직일 때마다 video의 실제 볼륨이 변하는 것을 확인할 수 있다.

💡 음소거 상태일 때, 볼륨 바 움직이면, 그에 맞춰 볼륨 크기가 변하도록

그러나, 음소거 버튼을 먼저 눌러 음소거 상태일 때는 볼륨 바를 움직여도 그대로 음소거 상태이다.

volumeRange의 value 값과 video.volume의 값이 모두 변하긴 하지만, video.muted가 true 값을 가지기 때문에 계속 음소거 상태가 유지되는 것이다.

따라서, handleVolumeChange 함수 안에서 video.muted가 true 값인 경우를 추가로 다뤄줘야 한다.

const handleVolumeChange = (event) = {
  const { target: { value } } = evenvt;
  if (video.muted) {
    video.muted = false;
    muteBtn.innerText: "Mute";
  }
  video.volume = value;
};

이제 음소거 상태인 경우에도 볼륨 바를 움직이면 원하는 대로 볼륨이 조정되는 것을 확인할 수 있다.

💡 음소거 상태일 때, 음소거 버튼 다시 한번 누르면, 소리가 돌아오도록

그러나, 음소거 상태에서 음소거 버튼을 다시 눌러 볼륨을 돌아오게 만들어도, 볼륨 바는 음소거 이전의 상태로 돌아오지 않고 그대로 맨 왼쪽에 남아 있다.

video.volume을 기억하고 업데이트하여 음소거 여부에 따라 input의 value 값이 달라지도록 한다.

// videoPlayer.js
const volumeValue = 0.3;
video.volume = volumeValue;

const handleMute = () => {
  if (video.muted) {
    video.muted = false;
  } else {
    video.muted = true;
  }
  muteBtn.innerText = video.muted ? "Mute" : "Unmute";
  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 = volumeValue;
};

✨ 내일 할 것

1. video player