{"id":3006,"date":"2013-07-01T04:00:00","date_gmt":"2013-07-01T04:00:00","guid":{"rendered":"http:\/\/jwplayer.com\/slow-motion-with-jw-player\/"},"modified":"2023-02-07T14:40:49","modified_gmt":"2023-02-07T19:40:49","slug":"slow-motion-with-jw-player","status":"publish","type":"post","link":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/","title":{"rendered":"Slow Motion with JW Player"},"content":{"rendered":"
\n

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 <\/em>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.<\/p>\n

Enter HTML5<\/strong><\/h2>\n

Unlike Flash, the HTML5 standard does allow you to set playback speed<\/a>. 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.<\/p>\n

On to JW Player<\/strong><\/h2>\n

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<\/a> to the player.<\/p>\n

Into the Code<\/strong><\/h2>\n

The above demo can be seen as a standalone page here<\/a>. 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:<\/p>\n

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\"
    }]
  }]
});
<\/pre>\n
Next, we store references and set up the slow motion toggle only if HTML5 is supported:<\/p>\n
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\");
        }
    }
});
<\/pre>\n
Lastly, we set up the function to toggle the slow motion to either be on or off. Note there\u2019s a small hack to work around a Firefox bug. Without it, Firefox would never return to 1x speed:<\/p>\n
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());
    }
};
<\/pre>\n
Wrapping Up<\/h2>\n
As you have seen, it is quite easy to control the playback speed of your videos withJW Player 6<\/strong>. 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<\/a>. 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!<\/p>\n<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3006","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"yoast_head":"\nSlow Motion with JW Player - JW Player<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slow Motion with JW Player - JW Player\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\" \/>\n<meta property=\"og:site_name\" content=\"JW Player\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-01T04:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-07T19:40:49+00:00\" \/>\n<meta name=\"author\" content=\"JW Player\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"JW Player\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\"},\"author\":{\"name\":\"JW Player\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\"},\"headline\":\"Slow Motion with JW Player\",\"datePublished\":\"2013-07-01T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\"},\"wordCount\":421,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\",\"url\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\",\"name\":\"Slow Motion with JW Player - JW Player\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/#website\"},\"datePublished\":\"2013-07-01T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jwplayer.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slow Motion with JW Player\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jwplayer.com\/#website\",\"url\":\"https:\/\/jwplayer.com\/\",\"name\":\"JW Player\",\"description\":\"End-to-End Solution for Streaming & Monetizing Video\",\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jwplayer.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jwplayer.com\/#organization\",\"name\":\"JW Player\",\"url\":\"https:\/\/jwplayer.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"contentUrl\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"width\":1000,\"height\":417,\"caption\":\"JW Player\"},\"image\":{\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\",\"name\":\"JW Player\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"caption\":\"JW Player\"},\"url\":\"https:\/\/jwplayer.com\/blog\/author\/jw-player\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Slow Motion with JW Player - JW Player","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/","og_locale":"en_US","og_type":"article","og_title":"Slow Motion with JW Player - JW Player","og_description":"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 […]","og_url":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/","og_site_name":"JW Player","article_published_time":"2013-07-01T04:00:00+00:00","article_modified_time":"2023-02-07T19:40:49+00:00","author":"JW Player","twitter_card":"summary_large_image","twitter_misc":{"Written by":"JW Player","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#article","isPartOf":{"@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/"},"author":{"name":"JW Player","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f"},"headline":"Slow Motion with JW Player","datePublished":"2013-07-01T04:00:00+00:00","dateModified":"2023-02-07T19:40:49+00:00","mainEntityOfPage":{"@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/"},"wordCount":421,"commentCount":0,"publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/","url":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/","name":"Slow Motion with JW Player - JW Player","isPartOf":{"@id":"https:\/\/jwplayer.com\/#website"},"datePublished":"2013-07-01T04:00:00+00:00","dateModified":"2023-02-07T19:40:49+00:00","breadcrumb":{"@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jwplayer.com\/blog\/slow-motion-with-jw-player\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jwplayer.com\/"},{"@type":"ListItem","position":2,"name":"Slow Motion with JW Player"}]},{"@type":"WebSite","@id":"https:\/\/jwplayer.com\/#website","url":"https:\/\/jwplayer.com\/","name":"JW Player","description":"End-to-End Solution for Streaming & Monetizing Video","publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jwplayer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jwplayer.com\/#organization","name":"JW Player","url":"https:\/\/jwplayer.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/","url":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","contentUrl":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","width":1000,"height":417,"caption":"JW Player"},"image":{"@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f","name":"JW Player","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","caption":"JW Player"},"url":"https:\/\/jwplayer.com\/blog\/author\/jw-player\/"}]}},"_links":{"self":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/comments?post=3006"}],"version-history":[{"count":1,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3006\/revisions"}],"predecessor-version":[{"id":5966,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3006\/revisions\/5966"}],"wp:attachment":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/media?parent=3006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/categories?post=3006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/tags?post=3006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}