Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change video playing speed using JavaScript?
In this article, we'll learn how to control video playback speed using JavaScript's HTML5 video properties. This allows users to watch videos at different speeds for better accessibility or user experience.
The playbackRate property controls video speed: values less than 1 slow down the video, values greater than 1 speed it up, and 1 returns to normal speed. Note that playbackRate is a JavaScript property, not an HTML attribute.
Syntax
To change the current playback speed:
let video = document.querySelector('video');
video.playbackRate = newSpeed;
To set the default playback speed:
let video = document.querySelector('video');
video.defaultPlaybackRate = 0.5;
video.load(); // Reloads video with new default speed
Example: Speed Control Buttons
<!DOCTYPE html>
<html>
<head>
<title>Video Speed Control - TutorialsPoint</title>
<style>
body { text-align: center; margin-top: 5%; }
h1 { color: rgb(3, 95, 121); }
button { margin: 10px; }
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1>
<video width="420" height="240" controls>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="speedUp()">Speed Up</button>
<button onclick="speedDown()">Speed Down</button>
<button onclick="resetSpeed()">Normal Speed</button>
<script>
let video = document.querySelector('video');
function speedUp() {
if (video.playbackRate < 4) {
video.playbackRate += 0.25;
}
console.log('Current speed:', video.playbackRate);
}
function speedDown() {
if (video.playbackRate > 0.25) {
video.playbackRate -= 0.25;
}
console.log('Current speed:', video.playbackRate);
}
function resetSpeed() {
video.playbackRate = 1;
console.log('Speed reset to normal');
}
</script>
</body>
</html>
Playback Rate Values
| Value | Description | Effect |
|---|---|---|
| 1.0 | Normal speed | Default playback |
| 0.5 | Half speed | Slower playback |
| 2.0 | Double speed | Faster playback |
| -1.0 | Reverse normal speed | Backwards playback |
Example: Getting and Setting Speed
<!DOCTYPE html>
<html>
<head>
<title>Video Speed Control - TutorialsPoint</title>
<style>
body { text-align: center; margin-top: 5%; }
h1 { color: rgb(3, 95, 121); }
button { margin: 10px; }
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1>
<video id="myVideo" width="420" height="240" controls>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br>
<button onclick="getSpeed()">Get Current Speed</button>
<button onclick="setSlowMotion()">Slow Motion</button>
<button onclick="setFastForward()">Fast Forward</button>
<script>
let video = document.getElementById("myVideo");
function getSpeed() {
alert('Current playback rate: ' + video.playbackRate);
}
function setSlowMotion() {
video.playbackRate = 0.5;
console.log('Speed set to 0.5x (slow motion)');
}
function setFastForward() {
video.playbackRate = 2.0;
console.log('Speed set to 2x (fast forward)');
}
</script>
</body>
</html>
Browser Compatibility Notes
Most browsers support playback rates between 0.25 and 4.0. Outside this range, audio may be muted. For best compatibility, keep speeds between 0.5 and 4.0. Negative values for reverse playback have limited browser support.
Key Points
-
playbackRatechanges speed immediately -
defaultPlaybackRatesets initial speed (requiresload()) - Values: <1 = slower, >1 = faster, 1 = normal
- Range 0.5-4.0 works best across browsers
Conclusion
JavaScript's playbackRate property provides easy video speed control. Use it to create custom video players with speed adjustment features for better user experience.
4K+ Views
