분류 전체보기
-
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
-
JavaScript video full screen buttonProject using node.js/Cloning Youtube 2020. 9. 3. 14:26
videoPlayer.js 사용자가 fullScrenn 버튼을 눌렀거나 videoContainer를 더블클릭했을 때 goFullScreen이 실행되도록 구현했다. Fullscreen이 되는 대상은 videoPlayer(video)가 아니라 그 전체를 감싸고 있는 videoContainer다. 그 후 fullscreen 버튼을 눌렀거나 다시 더블클릭했을 때 화면이 축소될 수 있도록 goFullScreen event를 제거하고 exitFullScreen event를 추가했다. exitFullscreen()은 element method가 아니라 document method다. 그렇기 때문에 document.exitFullscreen()을 사용해야 한다. 매커니즘은 goFullScreen과 같다. 화면이 단지 ..
-
JavaScript video volume range buttonProject using node.js/Cloning Youtube 2020. 9. 3. 14:09
videoPlayer.js handleVolumeClick에 빨간색 코드를 추가했다. 이제 음소거를 하면 실제 video volume의 range 값이 0이 되고 음소거를 풀면 videoPlayer에 있는 volume 값을 대입함으로써 range값을 되돌린다. volumeRange 값을 변경할 때 마다 input event가 발생한다. 그 때 마다 handleVolumeRange를 실행시킨다. 이 함수는 e.target.value의 값을 videoPlayer.volume에 대입한다. 그리고 value 값이 변경되어 특정 값 범위에 포함될 때 icon을 변경한다. 참고 자료 노마드 코더의 유튜브 클론 강의 HTMLMediaElement API MDN 소스 코드 https://github.com/zpskek..