Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change video playing speed using JavaScript?
In this article let us understand how to use an HTML5 video tag to alter the playing speed of videos that are embedded in an HTML document.
A number less than 1 slows down the video, a number greater than 1 accelerates the video, and then a number of 1 returns the video to its original pace. Also take note that playbackRate is a property and not an HTML attribute.
Although you wouldn't want to change the playback rate for every video site, you can do this if you think your visitors will prefer it. This only takes one HTML element setting!
PlaybackRate property allows us to change the playing speed. These are the syntax rules for it.
Syntax
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
By using the defaultPlaybackRate parameter, users can easily modify the default playing speed. It uses the syntax listed below.
Syntax
let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()
Example 1
<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
margin-top: 5%;
}
h1 {
color: rgb(3, 95, 121);
}
p {
margin-top: 5%;
}
button {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1><br>
<video width="420" height="240" controls loop>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
The video tag is incompatible with your browser.
</video>
<p>
<button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button>
<button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button>
</p>
<script>
let video = document.querySelector('video');
// Make the playing speed the default
video.defaultPlaybackRate = 0.5
// The video is loaded after setting
video.load();
function speedUp() {
// The playback speed has been increased by 1
video.playbackRate += 1;
}
function speedDown() {
// The playback speed has been decreased by 1
if (video.playbackRate > 1)
video.playbackRate -= 1;
}
</script>
</body>
</html>
Example 2
The playback speed of the audio or video is set or returned through the playbackRate property.
The Values of the property
| The Value | The Description |
|---|---|
| playbackspeed | Shows how quickly the audio or video is currently playing back. Type of situation values −
|
playbackRate Property for HTML Audio/Video DOM
What is the speed of playback?
The media is played back at a defined rate according to the playbackRate property. With this, user controls for fast forward, slow motion, and other features are implemented. A value of 1.0 signifies standard speed and is calculated by multiplying the current rate by the usual playback rate.
What playback speed is perfect?
The majority of browsers pause audio outside of playback Rate limits of 0.5 and 4 result in the video playing without sound. You should keep the range between 0.5 and 4 for the majority of the applications.
<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
margin-top: 5%;
}
h1 {
color: rgb(3, 95, 121);
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>TutorialsPoint Sample Video</h1><br>
<video id="myVideo" width="420" height="240" controls>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
HTML5 video is not compatible with your browser.
</video>
<br>
<button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button>
<button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br>
<script>
let demoVideo = document.getElementById("myVideo");
function getSpeed() {
alert(demoVideo.playbackRate);
}
function setSpeed() {
demoVideo.playbackRate = 0.5;
}
</script>
</body>
</html>
You will see the below screen after clicking on “Get Frequency of playback” button.
Further, you will see he below screen after clicking the “Slow motion video” button and then “Get Frequency of playback” button.
In Brief
In the example above, the variable (demoVideo in this case) was used to change the playing pace (or whatever else we desired to do). For example, simply enter demoVideo and change playbackRate to 2 to run at twice the pace. playbackRate equals 2.
The conclusion of all that. When you press "play," that video will start to play twice as quickly as usual. Do you prefer it to operate at half speed? Instead, set playbackRate to 0.5. Want it to resume operating at its regular speed? Basically, set playbackRate to 1.
2K+ Views
