Play Pause

1. watch.pug markup

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

input크키가 너무 커서 client/scss/components/forms.scss

input:not(input[type="range"]) {~~} //로 변경해주기

2. videoPlayer.js작성

• videoPlayer.js setup

const video = document.querySelector("video");
const playBtn = document.getElementById("play");
const muteBtn = document.getElementById("mute");
const time = document.getElementById("time");
const volumeRange = document.getElementById("volume");

2.1 video element

HTMLMediaElement
HTMLMediaElement는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스입니다. HTMLVideoElement 와 HTMLAudioElement (en-US) 는 이 인터페이스를 상속합니다.

HTMLVideoElement
HTMLVideoElement 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. HTMLMediaElement와 HTMLElement를 상속합니다.

2.2 videoPlayer.js - play Pause

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



playBtn.addEventListener("click", handlePlayClick);

mute/unmute

videoPlayer.js - mute/unmute

const handleMute = (e) => {
    if(video.muted){
        video.muted = false;
    } else {
        video.muted = true;
    }
    muteBtn.innerText = video.muted ? "Unmute" : "Mute";
  	volumeRange.value = video.muted ? 0 : volumeValue;
};

muteBtn.addEventListener("click", handleMute);

1. 우리는 mute가 되고 inputRange를 조정하면 mute가 풀려야함.
2. 우리는 mute를 푸렀을 때, 이전의 음량으로 돌아가야함.
   즉, inputRange의 이동을 감지해야함.

Volume

1. 우리는 mute가 되고 inputRange를 조정하면 mute가 풀려야함.
2. 우리는 mute를 푸렀을 때, 이전의 음량으로 돌아가야함.
   즉, inputRange의 이동을 감지해야함.

videoPlayer.js

-> eventListener - input: 실시간으로 input에 쓰여진 값을 listen한다.

let volumeValue = 0.5;
video.volume = 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);

playBtn, MuteBtn, VolumeBtn 최종 코드

-> + range잡고 0으로 끌고가면 mute상태로 바뀌고, 이 때 unmute버튼 누르면 처음 range를 0으로 끌고 가기 전 음량으로 바뀌도록 설정함. 즉, 유튜브 음량버튼과 동일하게 설정해줬음

• videoPlayer.js

const video = document.querySelector("video");
const playBtn = document.getElementById("play");
const muteBtn = document.getElementById("mute");
const time = document.getElementById("time");
const volumeRange = document.getElementById("volume");

let changeVolume = 0.5;
let volumeValue = 0.5;
video.volume = volumeValue;


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

const handleMute = (e) => {
    if(video.muted){
        video.muted = false;
    } else {
        video.muted = true;
    }
    muteBtn.innerText = video.muted ? "Unmute" : "Mute";
    volumeRange.value = video.muted ? 0 : volumeValue;
    changeVolume = volumeValue;
    video.volume = volumeValue;
};

const handleVolumeInput = (event) => {
    const {target : {value} } = event;
    if(video.muted){
        video.muted = false; 
        muteBtn.innerText = "Mute";
    } 
    volumeValue = value;
    video.volume = value;
    if(value === "0"){
        video.muted = true;
        muteBtn.innerText = "Unmute"
        volumeValue = changeVolume;
    }
};

const handleVolumeChange = (event) => {
    const {target : {value} } = event;
    changeVolume = value;
};

playBtn.addEventListener("click", handlePlayClick);
muteBtn.addEventListener("click", handleMute);
volumeRange.addEventListener("input", handleVolumeInput);
volumeRange.addEventListener("change", handleVolumeChange);