Is there a way to change the frame rate of a video playing in html5? [duplicate]

Question

How to change the video play speed in HTML5? I've checked video tag's attributes in w3school but couldn't approach that.

Answer 1

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+.

Answer 2

Just type

document.querySelector('video').playbackRate = 1.25;

in JS console of your modern browser.

Answer 3

(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:

1. The main answer by Jeremy Visser
2. Copied from my GitHub gist here: https://gist.github.com/ElectricRCAircraftGuy/0a788876da1386ca0daecbe78b4feb44#other-bookmarklets
   1. Get other bookmarklets here too, such as for aiding you on GitHub.

Answer 4

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;
}

Answer 5

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.

Answer 6

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

Answer 7

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.