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
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...

  • By
    Comment Preview Using MooTools

    Comment previewing is an awesome addition to any blog. I've seen really simple comment previewing and some really complex comment previewing. The following is a tutorial on creating very basic comment previewing using MooTools. The XHTML You can set up your XHTML any way you'd like.

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!