Video player

우리는 몇개의 js를 만들어야 한다. ( video player, record )

그러기 위해선 webpack을 조금 손봐줄 필요가 있다.

webpack의 entry를 살짝바꿔준다. output은 main 하나라 이렇게 되면 2개의 파일이 main.js로 만들어지므로 오류가 발생하게 된다. 따라서 webpack이 제공해주는 기술을 통하여

이렇게 바꿔주게 되면 우리가 앞서 정해놓았던 이름으로 main, videoPlayer로 변환이 된다. 짜잔 ~

그리고 이 videoPlayle.js를 작성하여 watch.pug에서 로드해주자. 이제 base.pug에 block scripts를 만들어

scripts전용 공간을 만들어주자.

 

watch.pug

플레이어를 만들어주기 위해서 위와같이 설정을한다.

우리는 각 속성을 이용해서 play버튼안의 내용을 play, pause로 바꿔줄 수 있다.

video는 HTMLMediaElement이다.

video가 실행되면 play event가, 멈추면 pause이벤트가 실행이 된다. 따라서

play객체를 눌렀을 때 video가 실행이 되고 다시 누르면 video가 멈추도록 설정을하고

video객체는 실행이 됐을때와 멈췄을 때 button의 innerText가 바뀌도록 설정하였다.

물론 playBtn을 눌렀을 때 두가지 동작이 한번에 되도록 할 수도 있다. 하지만 이번에는 분리해보았다.

 이와 마찬가지로 mute버튼도 만들어 주었다.

 

이번에는 볼륨조절장치,타임라인, 전체화면을 컨트롤할 수 있는 기능들을 만들어 보겠다.

볼륨조절장치를 만들 때 input(type="range")로 만들어줄 것인데 이 때 발생하는 event 중

change와 input이 있다. change는 마우스를 놓았을 때 event가 발생하는 것이고 input은 값이 바뀔 때 실시간으로 event가 발생한다. 지금은 input event를 사용하는 것이 더 적절하다.

먼저 pug를 다음과 같이 수정하겠다.

추가된 부분을 표시해 보았다. 

먼저 volume에서 값이 바뀔 때 handleVolume을 실행시킬 것이다.

e.target.value를 통해서 실시간으로 바뀌는 range값을 가져올 수 있다. 만약 지금 muted된 상태일 때 음량조절을 하면 muted가 풀리도록 먼저 설정해주었고, volumeValue는 전역변수로 현재의 volume의 값을 저장하는 역할을 한다.

video.volume에 바뀌고있는 volume의 값을 입력해줌으로써 음량을 변화시킬 수 있었다. volume이 0이 되었을 때 Unmute로 innerText를 바꿔주는 기능도 추가해줘보았다.

 

다음으로는  실시간으로 비디오의 영상시간이 변화하는 것을 만드는 기능을 추가해보겠다.

video에는 수많은 event들이 있는데 이 때 video의 정보들이 load될 때 실행되는 event가 있다. 

loadedmetadata이다. 

video.duration은 video의 전체 길이를 가져온다. 하지만 소수점이 붙어있어 이 부분을 Math.floor로 잘라준 값을 total에 저장해 두었다. forMatTime이라는 함수를 만들었는데 이 함수는 아래와 같다.

시간이 인자로 들어오고 new Date의 매개변수로 들어간다. 이때 1000을 곱해주는 이유는 우리가 가져온 time이 초단위이기 때문에 밀리세컨드로 변화해주기 위해서 한 것이다. new Date()만 했을 때 출력하는 값이 1970년00:00:00이다.

우리는 00:00과 같은 형식을 사용하기 위해 약간의 꼼수를 쓰려고 한다. new Date().toISOString()을 했을 때의 값이다.

forMatTime함수는 substr을 사용하여 필요한 부분만 가져와서 그 값을 return해 주는 함수이다. 이로써 우리는 비디오의 영상의 총길이를 깔끔하게 가져올 수 있다. totaltime의 innertext에 그 값을 집어 넣고 timeline.max에 total값을 입력해주었다. input range는 min과 max값이 꼭 필요하다. 처음과 끝이 없으면 range가 성립이 안되기 때문이다.

 

이제 영상이 흘러갈 때마다 같이 흘러가는 input range를 만들어 보려고 한다.

video의 event는 참 무궁무진하다 시간이 흐를 때마다 timeupdate event가 실행이 된다.

우리는 이 event가 실행될 때 마다 range의 value값도 실시간으로 업데이트 해주려고 한다.

video.currentTime을 사용하면 비디오의 현재 시간을 알 수 있다.  시간이 흐르면서 현재 시간은 계쏙 바뀔 테니 그 값을 currentTime에도 넣어주고 timeline.value에도 넣어주면 된다.

반대로 range를 움직였을 때 video의 값도 바뀌도록 해주었다.

video.currentTime은 read-only속성이 아니기 때문에 우리가 조작도 가능하다.

이로써 timeline또한 만들었다. 이제 fullscreenbutton을 만들어 보겠다.

 

 

현재 fullScreen인지 확인하는 방법은 document에서 가능하다. 

document.fullscreenElement의 값이 null인 경우이면 현재 fullscreen이 없는 것이고

만약 존재한다면 그 element를 반환한다. 

 

또 fullScreen을 해제하려면 document.exitFullscreen()을 해야한다. 

if문을 사용하여 full screen 상태이면 풀스크린을 빠져나가고 아니라면 풀스크린을 해주는 분기문이다.

풀스크린을 만드려면 그 만드려는 element에서 request.Fullscreen()을 해줘야한다. 

 

이렇게 하여 간단하게 video Player를 만들어 보았다. 이제 video에서 controls옵션을 빼주어도 잘 작동한다.