<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="data:," />
    <link rel="stylesheet" href="style.css" />
    <title>Project #26 - The Video Speed Controller App</title>
  </head>
  <body>
    <div class="container">
      <video
        class="video"
        width="1200"
        height="600"
        src="https://www.youtube.com/watch?v=vEZmxsaKXAg"
        loop
        controls
      ></video>
      <div class="speed">
        <div class="speed-bar">1×</div>
      </div>
    </div>
    <!-- ------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
}

video {
  object-fit: cover;
  border-radius: none;
  outline: none;
}

.speed {
  background: #fffb7f;
  flex: 1;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.speed-bar {
  width: 20%;
  background-image: linear-gradient(135deg, #fff720 10%, #3cd500 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

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

speed.addEventListener("mousemove", function (e) {
  //마우스가 진행바의 첫부분을 0으로 하고 움직인 x만큼의 위치.
  const x = e.pageX - speed.offsetLeft;
  const percent = x / speed.offsetWidth;
  const min = 0.1;
  const max = 5;
  const width = Math.round(percent * 100) + "%";
  const playBackRate = percent * (max - min) + min;
  //진행률의 길이.
  bar.style.width = width;
  //1.xxx같은 소수점 갓은 일과적으로 2배로 표시.
  bar.textContent = playBackRate.toFixed(2) + "x";
  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate
  video.playbackRate = playBackRate;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.