Webpack - creating video player &&&& (미완 - 작성예정 포스트들)

1. videoPlayer.pug 만들어주고 scss작성  기존 video__player는 삭제

 

2. javascript 작성 videoPlayer.js play & pause function - 고유의 아디를 만들어주고 ~ videoContainer가 있을때만

작동하도록 해야 오류 안남. 그리고 이벤트 리스너를 통해 video play & pause 함수를 만들어 준다.

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

HTMLMediaElement - Web API | MDN

mdn검색시 팁은 method를 찾아라~ innerHTM같은 것은 property이다. method는 element에서 제공하는 함수

 

muted도 property - muted는 readonly가 ㅏ니라 override가 된다.

 

3. enter Fullscreen exit Fullscreen

아직 풀스크린인지 아닌지 체크하는 기능은 없다.

그래서 할 수 있는 것은. 한번클릭하면 전체화면 그리고 기존 이벤트 리스너를 삭제하고 다른 기능을 넣어준다

 

request fullscreen mdn검색  

webkitRequestFullscreen() 으로 사용 - 

 

exitFullScreen함수를 만들어서 이전으로 돌아간다. document.exitFullscreen()도 사용

 

4. Total time and current Time

시간 표시를 위한 fomatDate함수를 만듬

 

html element video  - duration , currentTime

 

[setInterval vs timeupdate 이벤트 비교]
1) setInterval(getCurrentTime, 1000);
- 장점: 세부적인 반복 간격 지정 가능. (ex. 500=>0.5초마다 getCurrentTime 실행)
- 단점: 비디오가 실행 중이든, 중단되었든 계속 반복 실행됨. 즉, 실제로 비디오가 얼마나 재생되었는가와 무관함.
=> setTotalTime 내부에 있기 때문에 발생하는 현상. 해결하고 싶다면 코드 수정하거나, 반복되는 간격을 매우 짧게 두면 될 듯함(ex. setInterval(getCurrentTime, 200))

2) videoPlayer.addEventListener("timeupdate", getCurrentTime);
- 장점: 비디오가 재생 중일 때에만 반복 실행됨. 즉, 실제로 비디오가 얼마나 진행되었는지와 직접적으로 관련 있음.
- 단점: 반복실행되는 간격 지정 불가. 1초에 4~5번 정도씩 반복실행됨.

결론: 지금 같은 경우에는 timeupdate 이벤트를 사용하는 것이 적절해보임. (아님 말고)

3

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

 

비디오 ended 추가 (비디오가 끝나면 00000으로 돌림)

 

 

5. volume bar part one

볼륨조절~ css 및 js - input range 적용안됨 ㅡㅡ;; appearance none 이 안먹힘

그리고 비디오 전체 클릭시 이벤트 추가.

 

스페이스바 이벤트 추가 & 볼륨 바 스타일 성공