Video Speed Scrubber
How do I make an video speed scrubber?
What is a video speed scrubber? How do you make a video speed scrubber? This script and codes were developed by Wes Bos on 09 December 2022, Friday.
Video Speed Scrubber - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video Speed Scrubber</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <video width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop autoplay controls></video> <div class="speed"> <div class="speed-bar">1×</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Video Speed Scrubber - Script Codes CSS Codes
body { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100vh; background:#4C4C4C url('https://unsplash.it/1500/900?image=1021'); background-size:cover; font-family: sans-serif;
}
.wrapper { width:850px; display:-webkit-box; display:-ms-flexbox; display:flex;
}
video { box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
}
.speed { background:#efefef; -webkit-box-flex:1; -ms-flex:1; flex:1; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; margin:10px; border-radius:50px; box-shadow:0 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;
}
.speed-bar { width:100%; height:10px; background:-webkit-linear-gradient(260deg, #2376ae 0%, #c16ecf 100%); background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%); text-shadow:1px 1px 0 rgba(0,0,0,0.2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding:2px; color:white; height:16.3%; /*1x to start - should be made dynamic*/
}
Video Speed Scrubber - Script Codes JS Codes
'use strict';
var speed = document.querySelector('.speed');
var bar = speed.querySelector('.speed-bar');
var video = document.querySelector('video');
speed.addEventListener('mousemove', function (e) { var y = e.pageY - this.offsetTop; var percentage = y / this.offsetHeight; var min = 0.4; var max = 4; var height = Math.round(percentage * 100); var playbackRate = percentage * (max - min) + min; bar.style.height = percentage * 100 + '%'; bar.textContent = playbackRate.toFixed(1) + '×'; video.playbackRate = playbackRate;
});
Developer | Wes Bos |
Username | wesbos |
Uploaded | December 09, 2022 |
Rating | 4 |
Size | 2,782 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Character Units | 1,756 Kb |
Web Speech Demo | 2,073 Kb |
A Pen by Wes Bos | 4,273 Kb |
Update CSS Variables with JS | 2,335 Kb |
Knockout white backgrounds from images with mix-blend-mode | 2,054 Kb |
Animate in from an empty state | 2,644 Kb |
JavaScript Challenge | 1,650 Kb |
WTFCSS | 2,038 Kb |
Outline-offset | 2,013 Kb |
Object Fit for Videos | 2,543 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
TweetBox with React JS | J0zelito | 3,325 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Canvas Background Effect | Sonick | 3,513 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!