Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Set Video Playback Speed with JavaScript

By  on  

I love that media has moved from custom plugins (Flash…gross) to basic HTML <video> and <audio> elements. Treating these media sources as just another element allows us to use CSS filters to adjust display, for example. The less we need to do with ffmpeg or plugins, the better.

I’ve been noticing that many video sites have implemented a feature to adjust video playback speed, which is awesome if you’re trying to get through some sports highlights faster or to see that monster slam dunk in super slow motion. I was hoping it didn’t require some special type of server to send the file in slower or faster chunks and I was right: all you need is the playbackRate property!

const video = document.querySelector("video");

// Slow it to 50% speed
video.playbackRate = 0.5;

// Twice as fast!
video.playbackRate = 2;

// Back to normal
video.playbackRate = 1;

Using a number less than 1 slows the video down, a number larger than 1 speeds the video up, and 1 restores the video to normal speed. Also note that playbackRate is not a HTML attribute — it’s a property.

Adjusting playback rate isn’t something you’d want to do for all video sites, but if you think your users may like it, it’s only one HTML element property away!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API.

  • By
    spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?

Discussion

  1. Sid Vishnoi

    I created a little bookmarklet that helps me speed up the really slow videos on YoutTube 

    javascript:document.querySelector('video').playbackRate = parseFloat(prompt());
  2. Arley

    Of course it works great on as well!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!