40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Video Speed Scrubber</title>
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
<link rel="icon" href="https://fav.farm/✅" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
|
|||
|
|
<div class="speed">
|
|||
|
|
<div class="speed-bar">1×</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
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);
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|