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.

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.

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 withJW 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!