Project using node.js
-
JavaScript key down button for progress bar on videoProject using node.js/Cloning Youtube 2020. 9. 5. 10:02
videoPlayer.js video의 되감기와 앞으로 가기는 화살표 좌우 방향으로 했다. 각각의 key code 값은 37과 39이다. 또한 뒤로 가기를 눌렀을 때 video의 시간이 (-)minus가 되지 않도록 하고 앞으로 갔을 때 video의 총 시간을 초과하지 않도록 조건을 준다. 뒤로 가기와 앞으로 가기의 시간은 10s다. video의 실제 시간을 변경하고 동시에 progressBar에도 변화를 준다. 소스 코드 github.com/zpskek/wetube-v3/commit/c05747baf64a1cbf36c1045820f9c4f3b0cf41bd
-
JavaScript video progress barProject using node.js/Cloning Youtube 2020. 9. 5. 09:43
videoPlayer.js DOM 객체 Progress Boolean constant init() video prgress Bar는 두 가지로 나뉜다. 하나는 controller part이고 다른 하나는 사용자가 마우스를 click하거나 drag했을 때 발생하는 boolean 값이다. 하나씩 설명하자면 위 코드는 video가 실행되면서 currentTime이 바뀔것이다. 즉, timeupdate가 될 것이고 그 때마다 handleProgress를 실행시키는 것이다. handlePorgress() 함수를 보면 currentTime을 총 시간으로 나누고 백분율 100을 곱한다. 그리고 그 값을 scss에서 정의한 flex-basis의 style 값을 변경하는데 사용한다. 그렇게 되면 시간이 지남에 따라 빨간..
-
JavaScript video time lineProject using node.js/Cloning Youtube 2020. 9. 5. 09:08
설치 #npm install get-blob-duration npm install get-blob-duration Convenience method to patch Chromium bug when getting duration of HTML5 video or audio Blob. videoPlayer.js init()에 다음 함수를 추가한다. getBlobDuration의 parameter는 video의 src값을 준다. 그러면 반환 값으로 video의 총 영상 길이를 초 단위로 넘겨준다. 나는 영상 길이를 hh:mm:ss로 나타내고 싶기 때문에, duration을 가공해야 한다. hh:mm:ss 형식으로 영상 길이를 가공하는 함수가 formatDate()다. formatDate(duration)으로 구..
-
JavaScript key down button for volume range on videoProject using node.js/Cloning Youtube 2020. 9. 4. 16:15
videoPlayer.js volume up & down의 keyboard 단축키는 화살표 위 아래다. keyCode 값이 위 방향은 38, 아래 방향은 40이다. volumeRange의 범위는 min=0, max=1, step=0.1이다. JS의 소수점 계산은 값이 정확하지가 않다. 그렇기 때문에 +0.1와 -0.1 계산을 하다보면 그림과 같이 오차가 생긴다. 이러한 문제점을 해결하기 위해 다음과 같이 Math.floor() 계산을 해줘야 한다. 그 이후에 handleVolumeRange()가 parameter 받을 수 있도록 객체를 생성하고 parameter를 넘겨준다. 화살표 위 아래 방향은 scroll에 영향을 미치기 때문에 preventDefault()를 해줘야 한다. 소스 코드 github.c..
-
JavaScript key down button for fullscreen on videoProject using node.js/Cloning Youtube 2020. 9. 4. 13:49
videoPlayer.js fullScreenBtn의 keyboard 단축키는 'f'다. f의 keyCode는 70이다. 여기서 현재 video가 fullScreen인지 아닌지를 먼저 판별해야 한다. 그러기 위해서 fullScrnCheck라는 boolean 변수를 하나 생성했다. 현재 스크린의 상태에 따라 fullScreen mode를 사용할지 아닐지를 결정한다. 전체 화면이 되었을 때 Chrome은 esc 키를 눌렀을 때 화면을 원상 복귀 시키는 기능이 있다. 하지만 이 기능은 건드릴 수가 없다. 왜냐하면 이 부분을 disable하도록 개발자가 설정을 하면 일반 user는 전체화면을 하고난 후 다시 화면을 축소 시키지 못 하고 컴퓨터를 reboot하게 될지도 모르기 때문이다. 그렇다고 내버려두면 eve..
-
JavaScript key down button for play on videoProject using node.js/Cloning Youtube 2020. 9. 4. 13:31
videoPlayer.js init()에 다음 두 줄을 추가한다. 사용자가 space바를 눌렀을 때 keyCode 값은 32다. 각각의 keyboard는 keyCode 값을 가지고 있다. 앞으로 handleKeydown()에는 keyboard를 눌렀을 때 생기는 event들을 처리할 것이다. e.keyCode말고도 e.which를 사용해서 keyboard의 값을 가져올 수 있다. space 바를 누르면 브라우저에 의해 scroll이 내려간다. 이 현상을 막기 위해서 preventSpaceScroll()를 만들었다. 소스 코드 github.com/zpskek/wetube-v3/commit/205cc36676af799c8ebed58fb9c464a3eaa1c530