How to change video playback speed using JavaScript?
In this article, we will learn how to change the playback speed of a video using the HTML5 video tag Embedded in HTML document.
A number less than 1 will slow down the video, a number greater than 1 will speed up the video, then The number 1 will return the video to its original speed. Also note that playbackRate is a property instead of HTML attributes.
Although you don't want to change the playback rate for each video site, you can do so if you want Think your visitors will like it more. This only requires one HTML element to set up!
The PlaybackRate property allows us to change the playback speed. These are its grammatical rules.
grammar
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
Users can easily modify the default playback speed by using the defaultPlaybackRate parameter. it Use the syntax listed below.
grammar
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 audio or video is set or returned through the playbackRate attribute.
Value of attribute
| value | describe |
|---|---|
| Play speed | Display audio or video speed Currently playing. Type of situation value -
|
The playbackRate attribute of HTML audio/video DOM
What is the playback speed?
Media is played back at a defined rate based on the playbackRate property. With this, users Realizes the control of fast forward, slow motion and other functions. A value of 1.0 means Standard speed, calculated by multiplying the current rate by the usual playback rate.
What playback speed is perfect?
Most browsers will pause audio outside of playback Video has rate limits of 0.5 and 4 Play without sound. For most cases you should keep the range between 0.5 and 4 app.
<!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>
After clicking the "Get Play Frequency" button, you will see the following screen.
Also, after clicking the "Slow Motion Video" button and then clicking "Get", you will see him at the bottom of the screen Play frequency" button.
Introduction
In the example above, the variable (demoVideo in this case) is used to change the playback speed (or anything we want to do). For example, just enter demoVideo and change playbackRate to 2. Run twice as fast. playbackRate is equal to 2.
The conclusion to all this. When you press play, the video will play twice as fast usually. Do you like it running at half speed? Instead, set playbackRate to 0.5. want it to recover Running at normal speed? Basically, set playbackRate to 1.
The above is the detailed content of How to change video playback speed using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
How to implement panel drag and drop adjustment function similar to VSCode in front-end development?
Apr 04, 2025 pm 02:06 PM
Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
