ch11. video player

1. play setup

• 기존 base.pug >> main.js 말고 따로 videoPlayer.js 만들어서 
  비디오페이지에 가면 그 때 그 비디오페이지 자바스크립트를 로드할거임
• >> 웹팩 entry를 추가해야함

module.exports = {
  entry: {
    main: "./src/client/js/main.js", // 변경할 src code위치
    videoPlayer: "./src/client/js/videoPlayer.js",
  },
  output: {
    filename: "js/[name].js", // 결과물 어디다 넣을건지
    ~~
  },

2. play pause

• 기본셋팅

[watch.pug]
extends base.pug

block content 
    video(src="/"+video.fileUrl, controls)
    div 
        button#play Play 
        button#mute Mute 
        span#time 00:00/00:00
        input(type="range",step="0.1", min="0", max="1")#volume
    
block scripts 
    script(src="/static/js/videoPlayer.js")
    
======================================
[videoPlayer.js]
const video = document.querySelector("video");
const play = document.getElementById("play");
const mute = document.getElementById("mute");
const time = document.getElementById("time");
const volume = document.getElementById("volume");

const handlePlay = (e) => {
    // video playing, pause

    // else play the video
};

const handleMute = (e) => {};
play.addEventListener("click", handlePlay);
mute.addEventListener("click", handleMute);

• HTMLMediaElement

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

playBtn.addEventListener("click", handlePlayClick);
mute.addEventListener("click", handleMute);

3. mute and unmute

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);

 

4. Volume

• range
• 볼륨움직임 감지필요함 >> change말고 input 이벤트가 실시간으로 작동됨
• mute버튼 부분도 수정 << range 0 & 직전값으로 돌리는 기능

let volumeValue = 0.5;
video.volume = volumeValue;

const handleMute = (e) => {
  ~~
  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.volumn = value;
};

volumeRange.addEventListener("input", handleVolumeChange);

5. duration and current time

• loaded meta data event

[watch.pug]
 div
    span#currenTime 00:00
    span  / 
    span#totalTime 00:00

[videoPlayer.js]
const currenTime = document.getElementById("currenTime");
const totalTime = document.getElementById("totalTime");

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

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

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

• 시간표현 바꾸기
  • new Date(0) >> 1970.01.01 09:00:00부터 시작함 , 밀리세컨드
  • new Date(29 * 1000) >> 1970-01-01 09:00:29  <<  한국기준이라 +9시간
  • new Date(29 * 1000).toISOString() >> 1970-01-01 00:00:29
  • new Date(29 * 1000).toISOString().substr(11,8)  >> 00:00:29

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

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

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