How do I change the playback speed of the currently playing YouTube video, with JavaScript and the HTML5 player?

Question

If I'm watching a YouTube video on the YouTube website with the HTML5 player, what JavaScript code can I use to get the playback speed of the video, and change it to another setting?

Specifically, I need this code for a Greasemonkey script I'm working on, so the user's browser will be running the JavaScript code.

I know I could do the following:

document.getElementsByClassName('html5-main-video')[0].playbackRate = 2.0

And this would double the playback speed, but it does not change the dropdown box for the YouTube player's "Speed" field to "2.0" as well, which I'd like it to do if possible.

Solution

After playing around with the HTML, I just faked a .click(). That seems to be the best way. I poked around the YouTube API a bit but just found docs on embedding YouTube videos on your own page. I also played with HTML5 video like $('#video').playbackRate = 3.0 and you could then basically change the speed to whatever you wanted, but it wouldn't affect the dropdown box then, which can be useful if you want to change it back to another speed.

Here's the jQuery code:

$('#ytp-menu-speed').parent().find('.ytp-button:contains("1.5")').click()

Change 1.5 to whatever speed you want, as long as it's an option that YouTube provides.

Comments

[LBogaardt]

@Matt This is not a duplicate question. The one you are linking to is asking how to control the play speed of an embedded Youtube video on a personal website (via the Youtube API), whereas this question refers to the user experience on the Youtube website.

[Aditya Mittal]

$('video').playbackRate = 3.0