DEV Community

Ryan Palo
Ryan Palo

Posted on

14 1

Control HTML Video Playback Speed with the Console

Quick tip!

My university online class videos don't have a playback speed option. This is doubly a bummer because the professor talks slowly, and I usually listen to podcasts at 2x speed. Between that and I don't have time to watch 4 hours of lecture a week at regular 1x speed, I needed a way to speed up the video. With no playback speed controls built into the UI, I thought I was sunk.

But then I realized: wait a minute! I know things about computers! And JavaScript!

I popped open an Inspect window, did some digging into the HTML to make sure I could do what I wanted to do, and then switched over to the Console. It only took two lines:

video = document.querySelector("video")
video.playbackRate = 2
Enter fullscreen mode Exit fullscreen mode

And like that, my professor sounded like a chipmunk, and I had 2 extra hours of time to look forward to. I'm considering putting together a browser plugin to make some of my own video control buttons for the site!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
zimlearn profile image
Dr Abstract

No kidding - what a great tip!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay