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
HTML DOM Video playbackRate Property
The HTML DOM Video playbackRate property controls the speed at which a video plays. It returns a number representing the current playback speed, where 1.0 is normal speed, values greater than 1.0 increase speed, and values less than 1.0 decrease speed.
Syntax
Following is the syntax to get the current playback rate −
mediaObject.playbackRate
Following is the syntax to set a new playback rate −
mediaObject.playbackRate = number
Parameters
-
number − A numeric value representing the playback speed. Common values include:
-
0.5= Half speed (slow motion) -
1.0= Normal speed (default) -
1.5= 1.5x speed -
2.0= Double speed
-
Note − The maximum supported value is typically 16, and setting the value to 0.0 pauses the video. Negative values are not supported in most browsers.
Return Value
Returns a number representing the current playback rate of the video element.
Example − Video Speed Control
Following example demonstrates how to control video playback speed using buttons −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video playbackRate</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { width: 70%; margin: 0 auto; text-align: center; }
video { margin: 10px; }
button {
margin: 5px;
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
#display { margin-top: 15px; font-weight: bold; color: #333; }
</style>
</head>
<body>
<div class="container">
<h2>Video Playback Rate Control</h2>
<video id="myVideo" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br>
<button onclick="changeSpeed(0.5)">0.5x Speed</button>
<button onclick="changeSpeed(1.0)">Normal Speed</button>
<button onclick="changeSpeed(1.5)">1.5x Speed</button>
<button onclick="changeSpeed(2.0)">2x Speed</button>
<div id="display">Current Speed: 1.0x</div>
</div>
<script>
var video = document.getElementById("myVideo");
var display = document.getElementById("display");
function changeSpeed(rate) {
video.playbackRate = rate;
display.textContent = "Current Speed: " + rate + "x";
}
// Display initial playback rate
display.textContent = "Current Speed: " + video.playbackRate + "x";
</script>
</body>
</html>
The output shows a video player with speed control buttons. Clicking each button changes the playback speed and displays the current rate −
Video player with controls [0.5x Speed] [Normal Speed] [1.5x Speed] [2x Speed] Current Speed: 1.0x
Example − Interactive Speed Slider
Following example uses a range slider for more precise speed control −
<!DOCTYPE html>
<html>
<head>
<title>Video Speed Slider</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { width: 70%; margin: 0 auto; text-align: center; }
.speed-control { margin: 20px 0; }
.slider { width: 300px; margin: 10px; }
#speedValue { font-weight: bold; color: #2196F3; }
</style>
</head>
<body>
<div class="container">
<h2>Video Speed Control with Slider</h2>
<video id="videoPlayer" width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="speed-control">
<label for="speedSlider">Playback Speed:</label><br>
<input type="range" id="speedSlider" class="slider"
min="0.25" max="4" step="0.25" value="1"
onchange="updateSpeed(this.value)">
<div>Speed: <span id="speedValue">1.0x</span></div>
</div>
</div>
<script>
var video = document.getElementById("videoPlayer");
var speedDisplay = document.getElementById("speedValue");
function updateSpeed(value) {
var speed = parseFloat(value);
video.playbackRate = speed;
speedDisplay.textContent = speed + "x";
}
</script>
</body>
</html>
This creates a slider allowing continuous speed adjustment from 0.25x to 4x speed with real-time feedback.
Common Use Cases
Educational videos − Allow students to slow down complex content or speed up review material.
Training materials − Enable learners to control pacing based on their comprehension level.
Media players − Provide users with standard speed control options like 0.5x, 1.25x, 1.5x, and 2x.
Video analysis − Slow motion playback for detailed examination of video content.
Browser Compatibility
The playbackRate property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, the supported speed range may vary between browsers, with most supporting speeds from 0.25x to 16x.
Conclusion
The HTML DOM Video playbackRate property provides an easy way to control video playback speed programmatically. It accepts numeric values where 1.0 represents normal speed, values above 1.0 increase speed, and values below 1.0 decrease speed. This property is essential for creating custom media players with speed control functionality.
226 Views
