How to change the playing speed of videos in HTML5?

Question

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

Jeremy Visser · Accepted Answer · 2019-04-17T01:18:49.310

365

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

edited Apr 17 '19 at 01:18

answered Jun 12 '10 at 08:05

Jeremy Visser

6,237
1
25
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
5

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

score 107 · Answer 2 · edited Feb 11 '17 at 08:51

107

Just type

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

in JS console of your modern browser.

edited Feb 11 '17 at 08:51

kynan

13,235
6
79
81

answered Sep 30 '16 at 15:56

Andrey Panasyuk

1,071
1
7
3

3

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
I copy/pasted this code in the F12 developer tools on the browser and it works. – Marco Aurelio Fernandez Reyes Jun 23 '22 at 20:53
To effect all videos use `document.querySelectorAll('video').forEach(function(el, i) { el.playbackRate = 1.25; });` Useful for eLearning where there are hidden video tags in the page so effect them all. – Joshua Graham Jul 03 '23 at 06:45

Gabriel Staples · Answer 3 · 2021-09-16T05:06:20.463

(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
1. Get other bookmarklets here too, such as for aiding you on GitHub.

score 6 · Answer 4 · answered May 07 '21 at 19:00

6

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.

answered May 07 '21 at 19:00

phlaxyr

923
1
8
22

Good idea to customize keys for faster speed changes! Thanks for sharing. – devdanke Jan 27 '22 at 02:02

xgqfrms · Answer 5 · 2023-05-23T10:40:01.160

6

solutions

dom event onloadstart="this.playbackRate = 1.5;"

  <video
    onloadstart="this.playbackRate = 1.5;"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>

js video.playbackRate = 1.5;

  <video
    id="custom-video"
    controls
    src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>


const video = document.querySelector('#custom-video');

if(video) {
  video.playbackRate = 1.5;
}

demo

https://codepen.io/xgqfrms/pen/dydwzjp

edited May 23 '23 at 10:40

answered Jun 13 '22 at 09:34

xgqfrms

10,077
1
69
68

This worked for me while the others didn't. I was trying to change playback speed on youtube video previews, such as on the homepage. It has one dynamically updated video tag for all the preview plays and for some reason setting it with javascript didnt work but updating the attributes with onloadstart does. – Anders Elmgren Jun 14 '23 at 15:04
If the DOM content is created dynamically using js, it will overwrite any modifications you have made. – xgqfrms Jun 15 '23 at 00:22
If you still have problems, please give a complete demo code URL of an online editor, such as https://codepen.io/, https://codesandbox.io/ – xgqfrms Jun 15 '23 at 00:27

score 3 · Answer 6 · edited Dec 11 '19 at 07:58

3

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

edited Dec 11 '19 at 07:58

Pingolin

3,161
6
25
40

answered Dec 11 '19 at 06:47

Abdul Quadir

61
3

Hi @Armel, may I know where to put this code if I am using Selenium with Python? – mpx Apr 19 '20 at 11:31
Hi @balandongiv, I am sorry I don't know :( – Pingolin Apr 19 '20 at 18:50

score 2 · Answer 7 · edited Mar 25 '19 at 15:35

2

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.

edited Mar 25 '19 at 15:35

andreas

16,357
12
72
76

answered Mar 25 '19 at 15:17

Mattyduke1

31
1

score 2 · Answer 8 · edited Jul 22 '21 at 05:05

2

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

edited Jul 22 '21 at 05:05

Ana Paula

8,733
3
16
16

answered Apr 10 '21 at 09:08

Amin Abdiyan Mobarakeh

33
8

score 1 · Answer 9 · answered Mar 21 '21 at 07:41

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

negative values are not working in Chrome. wish they were, that'd be a nice easy rewind or reverse play feature — OG Sean, Jan 25 '23 at 06:05

score 1 · Answer 10 · answered Apr 26 '22 at 16:42

1

Firefox has a speed control context menu when you right-click

.

answered Apr 26 '22 at 16:42

reubano

5,087
1
42
41

score 1 · Answer 11 · edited Jun 29 '22 at 06:39

1

It works always you can try this

var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;

edited Jun 29 '22 at 06:39

Suraj Rao

29,388
11
94
103

answered Jun 29 '22 at 06:29

Md Munna Ahmed

11
2

score 1 · Answer 12 · answered Feb 07 '23 at 17:15

1

If there are multiple videos on the page, most of other answers will only change the first one.

javascript:document.querySelectorAll('video').forEach( (vid) => vid.playbackRate = 1.5 );

^^ this bookmarklet will speed up all videos on the open page.

answered Feb 07 '23 at 17:15

törzsmókus

1,799
2
21
28

score 1 · Answer 13 · answered Apr 11 '23 at 06:56

As posted above, the general solution to this is:

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

However, if this returns an error like:

caught TypeError: Cannot set properties of null (setting 'playbackRate')

due to the first function returning null (meaning it couldn't find the element specified), then the simple solution is to use a typical selector (ID, Class, etc.). But what I've found is that when this error is thrown even though it should not throw an error as there's a video element and it's the only one on the page, the issue is related to the HTML property of tabindex being set to "-1". Simply using browser inspect to get to the video, then removing the "tabindex" property can fix an error as displayed above.

score 0 · Answer 14 · answered Jun 23 '21 at 12:24

0

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:

answered Jun 23 '21 at 12:24

Mostafa Wael

2,750
1
21
23