JS30. Задание 28 Video Speed Controller

Демо: https://js3028.github.io/
Код: https://github.com/js3028/js3028.github.io

В этом проекте мы создаем инструмент, который изменяет скорость воспроизведения видео.

Разметка:

        <div class="wrapper">
            <video class="flex" width="765" height="430" src="video.mp4" loop controls></video>
            <div class="speed">
                <div class="speed-bar">1×</div>
            </div>
        </div>

В HTML у нас есть элемент видео, div для регулятора скорости, и контейнер div.

Ничего нового в CSS

Код Javascript.

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

Первое, что мы делаем в файле Javascript, - находим переменные.

Затем мы добавляем слушатель mousemove к регулятору скорости speed

speed.addEventListener("mousemove", handleMove);

В качестве аргумента передаём ему функцию  handleMove.

function handleMove(e) {
    var y = e.pageY - this.offsetTop;
    var percent = y / this.offsetHeight;
    var min = 0.1;
    var max = 4;
    var height = Math.round(percent * 100) + "%";
    var playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + "×";
    video.playbackRate = playbackRate;
}

Эта функция сначала вычисляет, где пользователь щелкнул по строке скорости, используя «event.pageY», и вычитает из нее точку, где панель начинается на странице this.offsetTop. Это значение сохраняется в переменной «y». Затем мы превращаем значение «y» в процент, разделяя «y» на высоту бара «this.offsetHeight» 
Результат вычисления будет использоваться для определения процента height для  стиля css

.speed-bar {
    ...
    height: 16.3%;
}

Переменная 'height' равна значению percent , умноженному на сто, округленному до ближайшего целого числа + «%» в конец значения

var height = Math.round(percent * 100) + "%";

Затем мы устанавливаем это значение равным «bar.style.height», что позволяет нам перетаскивать и помещать наполнитель скорости.

bar.style.height = height;


Нам нужны переменныъ для минимального и максимального значений.

    var min = 0.1;
    var max = 4;

Минимальное значение установлено равным 0,1, а максимальное значение равно 4. Когда высота бара составляет 0% от общей высоты, минимальное значение должно быть 0,4, а когда оно составляет 100% от высоты, скорость воспроизведения должна быть равна 4. Чтобы сделать это, мы используем следующую строку кода:

var playbackRate = percent * (max - min) + min;

Выводим значение высоты/скорости в баре.

bar.textContent = playbackRate.toFixed(2) + "×";

Метод toFixed(2) округляет число до двух знаков после запятой и возвращает строку. Как раз то, что нам нужно

Скорость воспроизведения видео меняет строка

video.playbackRate = playbackRate;

Собственно. её одной достаточно для выполнения проекта. Весь остальной код - визуализация, созданная для удобства пользователя.

Код полностью:

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

function handleMove(e) {
    var y = e.pageY - this.offsetTop;
    var percent = y / this.offsetHeight;
    var min = 0.1;
    var max = 4;
    var height = Math.round(percent * 100) + "%";
    var playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + "×";
    video.playbackRate = playbackRate;
}

speed.addEventListener("mousemove", handleMove);