반응형
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
<div class="speed">
<div class="speed-bar">1×</div>
</div>
</div>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
<div class="speed">
<div class="speed-bar">1×</div>
</div>
</div>
<script>
</script>
</body>
</html>
목표
비디오의 속도를 조절할 수 있는 속도바를 만들어보자.
코드 분석
사용할 변수를 선언한다.
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
함수를 선언한다.
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + '%';
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
사용할 변수를 선언한다.
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
함수를 선언한다.
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + '%';
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
.pageY는 페이지의 윗부분을 기준으로 마우스가 얼마나 떨어져있는지를 나타내는 값Math.round는 반올림한다는 메서드이고, toFixed()는 괄호안의 숫자자리까지 반올림하는 메서드이다.
따라서 정리해보면 y값을 원하는 위치에서의 y값, 즉 속도바에서의 높이만을 계산할 수 있도록 하고, percent로 그 안에서의 퍼센테이지를 정해 놓는다.
그 아래 변수들은 다 필요한 값을 숫자응용으로 정해놓은 것이고bar의 높이값을 적용, textContent를 이용하여 bar에 .toFixed(2)로 소수점 두번째자리까지 반올림하여 나타낸 값을 속도바에 출력한다는 내용이다. 그리고 그 값에 따라 속도를 조절할 수 있도록 선언한 것이다.
마무리
이번에는 속도바에 속도값도 같이 출력하여 속도를 조절하는 방법이여서 색다른 부분이 있었다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 30. Whack A Mole (0) | 2017.04.27 |
|---|---|
| 29. CountDown Timer (0) | 2017.04.27 |
| 27. Click and Drag (0) | 2017.04.26 |
| 26. Stripe Follow Along Nav (0) | 2017.04.26 |
| 25. Event Capture, Propagation, Bubbling and Once (0) | 2017.04.26 |
