Welcome folks today in this blog post we will be increasing or decreasing video playback speed in browser using vanilla javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> body { text-align: center; margin-top: 2%; } h1 { color: green; } p { margin-top: 2%; } button { margin-right: 20px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <video width="890" height="500" controls loop> <source src="https://www.youtube.com/watch?v=ZiCwFIrFbq4" type="video/mp4"> Your browser does not support the video tag. </video> <p> <button onclick="increase()">Increase Speed</button> <button onclick="decrease()">Decrease Speed</button> </p> <script> let video = document.querySelector('video'); // Set the default playing speed video.defaultPlaybackRate = 0.5 // Loading the video after setting video.load(); function increase() { // Increasing the playing speed by 1 video.playbackRate += 1; } function decrease() { // Decreasing the playing speed by 1 if (video.playbackRate > 1) video.playbackRate -= 1; } </script> </body> </html> |
And now if you open the index.html file inside the browser you will see the below screenshot
