티스토리 뷰

javascript30

11 - Custom Video Player

사용자 fistful 2019.03.14 19:35

개요

 

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

 

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 이벤트는 똑같이 동작한다. (권경모님 이야기 참고)

 

 

 

 

 

 


'javascript30' 카테고리의 다른 글

13 - Slide in on Scroll  (0) 2019.03.18
12 - Key Sequence Detection  (0) 2019.03.15
11 - Custom Video Player  (0) 2019.03.14
10 - Hold Shift and Check Checkboxes  (0) 2019.03.12
09 - Dev Tools Domination  (0) 2019.03.11
08 - Fun with HTML5 Canvas  (0) 2019.03.11
댓글
댓글쓰기 폼
공지사항
Total
68,244
Today
98
Yesterday
250
링크
TAG
more
«   2019/05   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함