Slow Motion with JW Player

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!

8 Comments

  1. samer February 14, 2014 - 05:42 EST

    can we make slow with sound on ?

    • Ethan Feldman February 14, 2014 - 05:59 EST

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

  2. Pascal July 10, 2013 - 07:04 EST

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

  3. Ethan LongTail July 30, 2013 - 05:19 EST

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

  4. Ethan LongTail July 10, 2013 - 08:29 EST

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

  5. Gaffar July 23, 2013 - 06:27 EST

    Thanks.

  6. Ethan LongTail July 23, 2013 - 07:04 EST

    Np.

  7. rajat amatya July 30, 2013 - 07:18 EST

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

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>