11 - Custom Video Player

개요

 

비디오 플레이어를 돌려보자

 

css 둘러보기

 

1) 기본 화면

2) 마우스를 올렸을때

3) 마우스로 슬라이더를 클릭했을때

 

 

	border-box - 박스의 크기를 잴때에 바깥의 경계선까지 포함해서 잰다는 것이다.   min-height - element 들의 최소한의 높이. 100 vh 란 전체 높이의 1/100
	.player - 가장 바깥쪽 div   border - 흰색이지만 앏고 거의 투명하게 처리되어 있다.   position: relative - top, right, bottom, left 값으로 상대적 위치 조정 가능   overflow: hidden - content 가 element 경계를 넘으면 그 부분 감추기   :fullscreen - 풀스크린이 될때의 스타일   max-width: none; - 지정하지 않음   width: 100% - 담고있는 녀석의 최대 너비를 사용
	버튼은 3개가 있다. - play, rewind, fast forward   :focus - 해당 class 가 focus 를 받은 경우
	제어창은 아래 부분이다.     .player__controls 안에 다 들어있다.   - .progress__filled - .player__button: play 아이콘 - .player__slider: range type 의 input 인 volume - .player__slider: range type 의 input 인 playbackRate - .player__button 2개 rewind 와 fast forward   .player:hover .player__controls - .player 에서 hovering 할때만 .player__controls 를 약간 올려달라는 것이다.
	.progress - flex: 10 이니 다른 형제보다 10배까지 될 수 있음   .progress__filled - width: 50% 의 의미를 정확히는 모르겠음 - flex: 0 은 여유공간이 생겼을 때에  flex-grow 가 변하지 않는다는 것
	-webkit   - 구글, 사파리 브라우저에 적용한다는  접두어이다.

 

index.html

 

코드를 보면 레이아웃을 만들어주고,

scripts.js 를 부른 것이 전부이다.

 

scripts.js

 

	가지고 놀 재료들을 우선 추려놓는다.   1) player: 전체 앱 영역 2) video: 플레이하는 비디오 그 자체 3) progress: 프로그레스 바 4) progress__filled: 실제 프로그레스 5) toggle: play ↔ pause 버튼 6) [data-skip]: rewind, fast forward 버튼 - dataset 을 query 할때는 대괄호를 쓴다. 7) ranges: volume, playbackRate 슬라이더
skip()   - data-skip 이라는 data-set 을 가진 두 버튼에 대해서 - change, mousemove 이벤트가 발생하면 호출된다. - 두 버튼의 data-skip 값은 각각 -10, 25 인데 이게 바로 video.currentTime 에 먹힌다.	togglePlay()   - 비디오 자체를 click 하면 실행된다. - video 자체가 paused 상태인지를 확인후 동작을 바꾼다.   updateButton()   - video 에서 play, pause 이벤트가 발생하면 실행된다. - toggle 은 버튼 element 이다. - 이것의 textContent 를 바꿔준다. - 어라, 실제로 video play / pause 명령은 없는데 싶었는데, 이 버튼 자체도 video 내에 있어서 togglePlay() 가 먹히는 거다.
	handleRangeUpdate()   - volume, playbackRate 두 슬라이더가 - change, mouseover 이벤트가 발생했을때 호출한다. - 각각 video.voulme, video.playbackRate 가 변경된다.   handleProgress()   - video 의 timeupdate 이벤트가 발생시 호출된다. - 재생시간 관련 변경이 있으면 실행된다. - 프로그레스바가 현재 재생시간에 맞게 변경된다.   scrub(e)   - 프로그래스 영역에서 마우스 버튼을 누른채 이동하면 호출한다. - 그러면 video.currentTime 이 업데이트 된다. → 그러면 자동으로 handleProgress() 가 호출되겠지?
	위에서 설명한 이벤트 핸들러들이다.   slider 2개에 대해 mousemove 는 실제로 먹히지는 않는다. (고 생각했다.) - mousemove 는 .value 값을 변경시키지 않기 때문이다.  (고 생각했다.) - mousedown 한 상태로 움직이면 실시간으로 변한다.

 

 

기타등등

 

* timeupdate vs progress:  Wes Bro 가 두 이벤트 차이를 모르겠다 이야기하는데 progress 는 전혀 다른 이야기이다.

 

progress	Fires when the browser is downloading the audio/video
timeupdate	Fires when the current playback position has changed

 

change + mousedown 이벤트와 input 이벤트는 똑같이 동작한다. (권경모님 이야기 참고)