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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Create WordPress Page Templates with Custom Queries

    One of my main goals with the redesign was to make it easier for visitors to find the information that was most popular on my site. Not to my surprise, posts about MooTools, jQuery, and CSS were at the top of the list. What...

  • By
    Introducing MooTools ElementSpy

    One part of MooTools I love is the ease of implementing events within classes. Just add Events to your Implements array and you can fire events anywhere you want -- these events are extremely helpful. ScrollSpy and many other popular MooTools plugins would...

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!