[JavaScript30] Day 28

Video Speed Controller

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(e) {
  console.log(e);
});

bar에 마우스가 enter되면 좌표를 출력해 줍니다.

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(e) {
  const y = e.pageY - this.offsetTop;
  console.log(y);
});

막대기 안에서의 위치값만은 표현하기 위해서 막대기의 top위치값을 pageY좌표에서 빼줍니다.

그렇게 하면 막대기 안에서의 위치 값을 표현할 수 있습니다.

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(e) {
  const y = e.pageY - this.offsetTop;
  const percent = y / this.offsetHeight;
  console.log(percent);
});

퍼센트로 나올수 있게 계산해 줍니다.

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(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) + '%';

  console.log(height, percent);
});

이 퍼센트가 높이로 쓸 수 있도록 정수의 값으로 계산되게 해 줍니다.

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(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) + '%';
  bar.style.height = height;
  
  console.log(height, percent);
});

이제 스피드를 표시하는 바는 마우스를 따라 높이가 달라지게 됩니다.

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(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) + 'x';
  console.log(height, percent);
});

스피드바에 숫자도 속도에 맞춰서 나오도록해줍니다.

하지만 이 숫자는 정수로 떨어지지 않기 때문에, toFixed를 이용하고 소수점 아래로 2자리까지만 출력되도록해줍니다.

 

 

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(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) + 'x';
  video.playbackRate = playbackRate;
});

실제로 스피드바의 속도대로 비디오의 속도도 변하게 해 줍니다.

 

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) + 'x';
  video.playbackRate = playbackRate;
}

speed.addEventListener('mousemove', handleMove);

코드를 handleMove라는 function을 만들어서 정리할 수도 있습니다.

 

---

Number.toFixed() : 숫자를 고정 소수점 표기법으로 표기해 반환하는 메서드

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)