159

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

live2
  • 2,620
  • 2
  • 25
  • 35
Young
  • 7,006
  • 7
  • 38
  • 62

8 Answers8

256

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

Jeremy Visser
  • 5,061
  • 1
  • 22
  • 30
  • 1
    Thanks for the helpful resource.Though Firefox doesn't support the attribute I've made a demo in Chrome which works fine.I guess my boss will like that.Thank you! – Young Jun 12 '10 at 09:31
  • 4
    playbackRate [works in Firefox since version 20](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/20). It also works in Chrome. – Janus Troelsen Jul 11 '13 at 16:04
  • 2
    this works when run in the beginning but not if its run later in the process, such as at: window.onload=function(){document.getElementById("master_video").defaultPlaybackRate=0.1;document.getElementById("master_video").play();} – john-jones Dec 19 '13 at 11:48
  • its not working for Ionic android...I am using HTML% video player in ionic framwork for android but it not support playback rates......... – Dinesh R Rajput Nov 26 '15 at 07:43
  • Its not working for multiple video player in same page. Only the first one works fine and other plays in normal speed. – Sushan May 24 '17 at 12:34
  • 2
    @Sushan `.querySelector` returns the first matching one. You can use `.querySelectorAll`, but you need to iterate through them instead of directly using the code in these answers. – leewz Jul 06 '17 at 05:01
69

Just type

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

in JS console of your modern browser.

kynan
  • 11,847
  • 6
  • 71
  • 79
Andrey Panasyuk
  • 691
  • 5
  • 3
  • 2
    Some attributes of the video element will prevent this command from working. If this console command fails, check for attributes on the video element and parent elements in the inspector and remove those that block user interaction with the video. The try the command again. – Christopher Harwood Nov 09 '18 at 16:45
4

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

enter image description here

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:

enter image description 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.
Gabriel Staples
  • 11,777
  • 3
  • 74
  • 108
0
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.

andreas
  • 14,688
  • 11
  • 61
  • 62
Mattyduke1
  • 11
0

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;
}
Armel
  • 2,328
  • 6
  • 16
  • 28
Abdul Quadir
  • 31
  • 3
0

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

source: w3schools.com

Nader Ahmed
  • 1
0

In chrome, create a new bookmark enter image description here

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

enter image description here

Amin Abdiyan Mobarakeh
  • 13
  • 5
0

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.

phlaxyr
  • 593
  • 1
  • 5
  • 15