12.29수 공부

비디오플레이어 만들기 

 

서치화면에 녹화js를 실행시키는건 이상하잖아 

다양한 js파일 만들기 

1.src / client / js / videoPlayer.js 파일 생성

2.웹팩에 여러가지파일 포함시키기

 2-1.entry 객체 형태로 만들기 //지금은 main.js 한가지만 entry 하고있음 

 2-2. output에 변수이용하여 각  파일 출력하기 

 

module.exports ={
    entry: {
        main: "./src/client/js/main.js",
        videoPlayer: "./src/client/js/videoPlayer.js",
    },
    mode: 'development',
    watch: true, 
    plugins: [new MiniCssExtractPlugin({
        filename: "css/styles.css",
    })],
    output:{
        filename: "js/[name].js", //webpack에서 자동으로 entry에있는 파일 가져감 
        path: path.resolve(__dirname,"assets"),
        clean:true,
    },

 

3.비디오플레이어를 비디오플레이어가 필요한페이지에 로드하기

view-watch.pug

 3-1. base.pug

    body 
        include partials/header
       
        main
            block content
        include partials/footer
    block scripts //block content처럼

 

 3-2 watch.pug

 

  block scripts 
     script(src="/static/js/videoPlayer.js") // /static이 /assets폴더에 접근 허용하는 경로 

 

4.비디오 플레이어 수정하기

 4-1.html 수정 

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

 

 

+input 기존 설정 때문에 크기가 엄청 커져서

form.scss에 

input:not([type="range"]) {}

로 변경함 

 

 

코드 작성 할 때 

//- pug파일 가지고 있는사람만 볼 수있고 

//은 inspect하면 모두 주석 볼 수있음

 

 

4.2 js

 

 

 

video Element, audio Element는 HTMLMediaElement 상속을 받음 

HTMLMediaElement  속성과 function

https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement

HTMLMediaElement - Web API | MDN

 

1. mute 누르면 rage :0 , 드래그하면 음소거 

2. 음소거가 된 상태에서, 버튼을 눌르면 그 전 상태로 

--> volume의 이동을 감지 할 수있어야 함 

 

range의 기본 값 바꾸기 

  input(type="range",step="0.1", value="0.5", min="0", max="1")#volume

  value 값, html 값만 설정한거지 비디오의 음량을 바꾸지 않음 

  video.js 

  video.volume = 0.5;

 

 비디오볼륨 드래그 왔다갔다.

--> change event :마우스 놓을 때 이벤트 발생 console창으로 확인

--> input event: 실시간으로 드래그 할때마다  이벤트발생

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

 

const handleVolumeChange=(event)=>{
    console.log(event.target.value);
}

console 창

1. const handleVolumeChange=(event)=>{

 const{target:{value}} =event;

 video.volume =value; 비디오 볼륨에 밸류값 넣기 

}--> 볼륨키로 볼륨 조절 성공!

 

2. mute한 상태에서 volume값 움직이면 -->음소거 해제 

 

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

스스로해결한문제 

1.volume.value= 0일 때 muteBtn innerText -> unMute로 

2. volume.value= 0일 때 Unmute누르면 0으로 돌아가지않고 기본 0.5돌아가기

 

 

Mute 했다가 Unmute하면 그 전의 상태로 돌아가야함 

전체코드 

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 volumeValue =0.5; //global variable
video.volume = volumeValue;


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

const hanldeMute = (e)=>{
    if(video.muted){
        video.muted= false;
    }else{
        video.muted= true;
    }
    if(video.volume === 0){
        video.muted= false; 
        volumeValue= 0.5;
        video.volume =0.5;
    }
    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; //실제 변경 

    if(video.volume === 0){
        video.muted =true;
        muteBtn.innerText="Unmuted";
    }

}

playBtn.addEventListener("click", hanldePlayClick);
muteBtn.addEventListener("click", hanldeMute);
volumeRange.addEventListener("input", handleVolumeChange);

 

---

현재비디오시간 전체비디오시간 만들기 

 

Audio, Video에 사용 가능한 이벤트
loadeddata, loadedmetadata, canplay, canplaythrou

 

loadedmetadata

비디오에서 움직이는 이미지 제외한 모든 것이 로드되면

 

watch.pug 수정

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

속성

currentTime,

duration

이벤트

loadedmetadata, 

timeupdate,

 

JS에서 eventlistener을 추가하기 전에 video가 전부 로딩이 되어서, handleLoadedMetadata() 가 아예 불러지지 않을 수 있습니다.
해결법은 videoPlayer.js 끝부분 쯤에 하단의 코드를 붙여넣는 것입니다.
if (video.readyState == 4) {
handleLoadedMetadata();
}
video.readyState가 4라는 뜻은 video가 충분히 불러와져서 사용이 가능하다는 뜻입니다. 자세한 정보는 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState 참고하세요.

이 현상에 대해서 간단하게 정리해서 블로그 글도 하나 올려 보았습니다. 참고 원하시는 분들은 참고하세요.
https://kasterra.github.io/inconsistent-event-firing-with-html5-video/

const handleLoadedMetadata = () => { totalTime.innerText = Math.floor(video.duration); }; const handleTimeUpdate = () => { currenTime.innerText = Math.floor(video.currentTime); }; video.addEventListener("loadedmetadata", handleLoadedMetadata); video.addEventListener("timeupdate", handleTimeUpdate);

 

const formatTime =(seconds) =>{

    return new Date(seconds  * 1000).toISOString().substring(14,19);

                                           ms       한국시간으로  이거 안하면 +9hr됨 

}

const handleLoadedMetaData =()=>{

    return totalTime.innerText = formatTime(Math.floor(video.duration));

}

const handleTimeUpdate =()=>{

   return currentTime.innerText =formatTime(Math.floor(video.currentTime));

}

 

 

동영상 바 HTML input에는 min=0만 넣고 

loadedMetaData이벤트는   동영상 길이를 아니까 handleLoadedMetaData 핸들러에 

timeline.max = Math.floor(video.duration) ;

---

풀스크린만들기 

 

element.requestFullscreen();

보통 video에다가 적용을 하는데 이렇게 할경우

다른 컨트롤러를 제외하고 비디오만 풀스크린이된다. -> 전체를 감싸는 container HTML 작성 

document.exitFullscreen();

 

Fullscreen API

https://developer.mozilla.org/ko/docs/Web/API/Fullscreen_API