How to change the playing speed of videos in HTML5?
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+.
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.
Just type
document.querySelector('video').playbackRate = 1.25;
in JS console of your modern browser.
(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.