Date: July 1, 2013 Author: Ethan Feldman

As long as our player has been around, we have received requests from our customers asking to slow down video playback. Unfortunately, Flash never exposed any sort of playback speed control across the board. Take a video with progressive download — by default controlling playback speed is not supported. The only way for this to work is by using RTMP, with either Adobe Flash Media server or Wowza Media Server (FLV only).

As a support team, we would get around this by using the player API to mute the audio track and essentially make the play pause very quickly, over and over again, using a timer, to simulate the illusion of slow motion, however, this solution was not very elegant, and it made the play icon flicker.

Enter HTML5

Unlike Flash, the HTML5 standard does allow you to set playback speed. All modern HTML5 capable browsers have implemented the playbackRate and defaultPlaybackRate properties now, so it is very easy to create a basic video tag that plays back at an alternative rate. The only browsers that support these are: IE10, IE9, Firefox, Chrome, Opera, and Safari. Below is a breakdown enumerating the browsers that supports this, along with their current market share:

Browser Market Share Slow Motion Support
Internet Explorer 9/10 14% Yes
Firefox 16% Yes
Chrome 36% Yes
Safari 3% Yes
Opera 1% Yes
Internet Explorer 7/8 7% -
Android 7% -
iPad/iPhone 7% -
Other 9% -

On to JW Player

Since the JW Player is already built upon HTML5, it is very easy to control playback speed inside JW Player 6 too. We have moved the speed button into the player itself in order to make it look like this is a function native to the player. Here is a demo using the JW Player to do this:

Into the Code

The above demo can be seen as a standalone page here.

Below is the breakdown of the JavaScript code that is used. First, a basic player set up, like we always have. We include a WebM video so Firefox can play in HTML5 mode:

jwplayer("player").setup({
  playlist: [{
    image: "http://content.bitsontherun.com/thumbs/i8oQD9zd-640.jpg",
    sources: [{
      file: "http://content.bitsontherun.com/videos/i8oQD9zd-kNspJqnJ.mp4"
    },{
      file: "http://content.bitsontherun.com/videos/i8oQD9zd-27m5HpIu.webm"
    }]
  }]
});

Next, we store references and set up the slow motion toggle only if HTML5 is supported:

var videoTag;
var currentRate = 1;

jwplayer().onReady(function() {
    if (jwplayer().getRenderingMode() == "html5"){
        videoTag = document.querySelector('video');
        if(videoTag.playbackRate) {
            jwplayer().addButton("slomo.png","Toggle Slow Motion",
                toggleSlomo,"slomo");
        }
    }
});

Lastly, we set up the function to toggle the slow motion to either be on or off. Note there’s a small hack to work around a Firefox bug. Without it, Firefox would never return to 1x speed:

function toggleSlomo() {
    currentRate == 1 ? currentRate = 0.2: currentRate = 1;
    videoTag.playbackRate = currentRate;
    videoTag.defaultPlaybackRate = currentRate;
    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
        jwplayer().seek(jwplayer().getPosition());
    }
};

Wrapping Up

As you have seen, it is quite easy to control the playback speed of your videos with JW Player 6. Feel free to use the demo in this blog post and adjust this as you see fit (adding more speed buttons, etc). A direct link to this demo is available here. Please let us know if you have any questions or if you have built a cool integration that you wish to show off, comments are welcome, happy embedding!

9 comments

    • samer

      February 14, 2014 at 5:01 pm


      can we make slow with sound on ?

      • Ethan Feldman

        February 14, 2014 at 5:47 pm


        Most browsers do not allow for sound when videos are slowed down like this.

    • jalpesh

      January 17, 2015 at 5:01 am


      Hello,

      As per above example, can we use Playback rate functionality in HLS streaming, because of i have used above code and it is working fine for only .mp4 but i have used .m3u8

      I have already purchase Premium unlimited plan,

    • Pascal

      July 10, 2013 at 7:14 pm


      How could this code be added to the WordPress plugin of JW6?

    • Ethan LongTail

      July 10, 2013 at 8:33 pm


      The bottom part of this code (other than the player setup), can be added to a

    • Gaffar

      July 23, 2013 at 6:16 pm


      Thanks.

    • Ethan LongTail

      July 23, 2013 at 7:26 pm


      Np.

    • rajat amatya

      July 30, 2013 at 7:06 am


      how to get my uploaded file url from Bits on the Run so that i can put it in javascript file portion?

    • Ethan LongTail

      July 30, 2013 at 5:05 pm


      You can use this script with a BOTR embed as well.

Leave a comment

Your email address will not be published



We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our Comments Policy