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