Video Speed Controller

목표

비디오 재생속도 컨트롤러를 삽입

기본 코드

<!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>

과정

  1. 상수 생성
  2. 속도를 조절할 수 있게하는 함수 생성
  3. 함수 실행

코드

  1. 상수 생성

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

    각 클래스에 해당하는 요소를 speed, bar, video에 담음

  2. 속도를 조절할 수 있게하는 함수 생성

    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;
     }
    

    y에 레인지바의 최상단 좌표를 담고, percent로 전체 레인지바의 크기에서 최소 0.4 최대 4로 조절할수 있도록 퍼센트 설정 후 반올림해 소숫점 두자리로 나타냄
    위에 설정한 값들을 레인지바에 적용시켜주고 video의 속도를 조절할 수 있도록 playbackRate를 사용

  3. 함수 실행

    speed.addEventListener('mousemove', handleMove);
    

    마우스가 움직이면 handleMove 실행

찾아본 내용, 알게된 내용들

playbackRate - 비디오의 속도를 조절할 수 있게 해주는 메소드

'개발 > JavaScript30' 카테고리의 다른 글

30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
  1. 홍지환 2017.04.19 23:16 신고

    열심히하시는군요

  2. BlogIcon takeu takeU 2017.04.19 23:31 신고

    97이니까3번더

+ Recent posts