How to change the playing speed of videos in HTML5?
JavascriptHtmlPerformanceVideoHtml5 VideoJavascript Problem Overview
How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.
Javascript Solutions
Solution 1 - Javascript
According to this site, this is supported in the playbackRate
and defaultPlaybackRate
attributes, accessible via the DOM. Example:
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
The above works on Chrome 43+, Firefox 20+, IE 9+, Edge 12+.
Solution 2 - Javascript
Just type
document.querySelector('video').playbackRate = 1.25;
in JS console of your modern browser.
Solution 3 - Javascript
(Tested in Chrome while playing videos on YouTube, but should work anywhere--especially useful for speeding up online training videos).
For anyone wanting to add these as "bookmarklets" (bookmarks containing JavaScript code instead of URLs) to your browser, use these browser bookmark names and URLs, and add each of the following bookmarks to the top of your browser. When copying the "URL" portion of each bookmark below, copy the entire multi-line code block, new-lines and all, into the "URL" field of your bookmark creation tool in your browser.
Name: 0.5x
URL:
javascript:
document.querySelector('video').playbackRate = 0.5;
Name: 1.0x
URL:
javascript:
document.querySelector('video').playbackRate = 1.0;
Name: 1.5x
URL:
javascript:
document.querySelector('video').playbackRate = 1.5;
Name: 2.0x
URL:
javascript:
document.querySelector('video').playbackRate = 2.0;
Here are all of my playback-speed bookmarklets:
I added all of the above playback speed bookmarklets, and more, into a folder named 1.00x
on my bookmark bar, as shown here:
References:
- The main answer by Jeremy Visser
- Copied from my GitHub gist here: https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
- Get other bookmarklets here too, such as for aiding you on GitHub.
Solution 4 - Javascript
You can use this code:
var vid = document.getElementById("video1");
function slowPlaySpeed() {
vid.playbackRate = 0.5;
}
function normalPlaySpeed() {
vid.playbackRate = 1;
}
function fastPlaySpeed() {
vid.playbackRate = 2;
}
Solution 5 - Javascript
In chrome, create a new bookmark
Enter an arbitarary name for example speed selector then Enter the following code in the URL
javascript:
var speed = prompt("Please enter speed", "1");
document.querySelector('video').playbackRate = speed,void(0);
then when you click on this bookmark, a popup window appears then you can enter the speed of video
Solution 6 - Javascript
I prefer having a more fine tuned approach for video speed. I like being able to speed up and slow down the video on command. Thus I use this:
window.addEventListener("keypress", function(e) {
if(e.key==="d") document.getElementsByTagName("video")[0].playbackRate += .1; else if(e.key==="s") document.getElementsByTagName("video")[0].playbackRate -= .1;
}, false);
Press d to speed up, s to slow down.
Solution 7 - Javascript
javascript:document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 0.1;
you can put any number here just don't go to far so you don't overun your computer.
Solution 8 - Javascript
suppose that your video/audio id is myVideo
, then you can simply use JavaScript for doing that you wanna do, By just typing the following simple JS code:-
var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;`
That will decrease the speed of your video/audio to it's half speed.
playbackspeed
Indicates the current playback speed of the audio/video.
Example values:
1.0 is normal speed
0.5 is half speed (slower)
2.0 is double speed (faster)
-1.0 is backwards, normal speed
-0.5 is backwards, half speed
w3schools.com
source:Solution 9 - Javascript
Just type the following command in the javascript console of your browser:
document.querySelector('video').playbackRate = 2.0;
You can get it by choosing the inspect option from the right-click menu as follows: