How to change playback rate in jwplayer

Question

I want to change the playback speed of video in HTML5 mode of jwplayer. I am not interested in flash browser, we will be restricting this feature only for HTML5 browsers

Issue: I tried changing the playbackrate for HTML5 in jwplayer but playbackrate is coming undefined i am attaching my code below

    jwplayer('my-video').setup({
                 sources: [
                      {file:'./test.mp4' , type: "mp4" },
                     ],
                 width:'640px',
                 height:'360px', 
                 image : './test.jpg'
              });
$("#speed_10").click(function() {
        myVid=$( "#my-video" ).find('.jwvideo').find('video');
        alert(myVid.length);

        alert($( "#my-video" ).find('.jwvideo').find('video').attr('src'))
        alert(myVid.playbackRate)
        alert($( "#my-video" ).find('.jwvideo').find('video').length)
        $( "#my-video" ).find('.jwvideo').find('video').PlaybackRate=0.5; 

 });

1st alert coming as 1
2nd alert coming undefined
3rd alert is showing "source"
4th alert is 1

I am able to catch the div but not able to change the playback rate in jquery !!!

http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/32556/playbackrate-support/

following above link i also tried with java script and it worked using code below

(document.getElementsByTagName('video')[0].playbackRate=0.2.

but if i use above code how do i use this for multiple video since there is no ID involved in above code [no unique id is passed for above javascript]

Below is the div structure for the jwplayer

Leisurely

Answer 1

https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/

only add line playbackRateControls in .setup()

jwplayer('user-player').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/gaCRFWjn',
  // Set the available playback rates of your choice
  playbackRateControls: [0.75, 1, 1.25, 1.5]
});

Affiance

its new feature which was not available earlier thanks for the answer – Leisurely

Ok, added, Thanks. – Affiance

Answer 2

I found the answer for this, main issue which i faced for multiple video was how to make each video unique.i just had to get div by ID first and after get 'Video' tag than change playbackrate
adding the code below

var video = document.getElementById('exampleId')
var video_speed = video.getElementsByTagName('video')[0]
alert(video_speed.playbackRate)

video_speed.playbackRate=0.2;
alert(video_speed.playbackRate)

I even tried with multiple video, it worked fine

Leisurely

If there's just one, you can do video_speed = document.getElementsByTagName('video')[0] – Erena

Answer 3

Found this script manually manipulating the DOM for custom speeds:

<script type="text/javascript">
  jwplayer("video").setup({
      image: 'https://<your_CDN_ID>.cloudfront.net/static/splash/<splash.png>',
      width: 960,
      height: 600,
      flashplayer: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.flash.swf",
      html5player: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.html5.js",
      primary: 'html5',
      sources: [
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.mp4' },
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.webm' }
      ]
  });

  var tag;

  jwplayer().onReady(function(){
    if (jwplayer().getRenderingMode() == "flash") {
      return;
    }

    tag = document.querySelector('video');
    tag.defaultPlaybackRate = 1.0;
    tag.playbackRate = 1.0;

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/25.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.25;
    },"025");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/05.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.5;
    },"05");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/1.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.0;
    },"1");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/125.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.25;
    },"125");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/15.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.5;
    },"15");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/2.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 2.0;
    },"2");

  });

</script>

Instead of toggle like the excellent blogpost from Ethan there are speed buttons.

Just setting a custom speed:

document.querySelector('video').playbackRate=0.80;

Cedillo

Answer 4

Just add ids to your videos and use document.getElementsById (id) instead of document.getElementsByTagName.

document.getElementsById('yourid').playbackRate=0.2

Deathtrap

Hi thanks, but jwplayer is dynamically generating the video tag and it is not having any ID in video tag, i am just catching the video tag using jquery find and trying to change playbackrate but it is not working – Leisurely

Use the video's parent tag id (which you control)... like so document.getElementsById('my-video').getElementsByTagName('video')[0].playbackRate=0.2 – Deathtrap

Basically you need to create containers with different ids for all your videos ...then select those..and from their children select the video tag. – Deathtrap

Answer 5

I wrote a blog post about a how to do this in the JW Player, by the way. It might be helpful! - http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player

Runny

My main concern was with sound i wanted to make the sound and video in slow speed, whereas your plugin doesnot support the slow sound thats why i didnt go with it but your plugin works great for slow motion :) – Leisurely

It actually depends on the browser. What the demo in Opera for example, the sound will be quite slow ;) – Runny

@ethan-jwplayer Can one also speedup the playback rate with this? (before I invest a bunch of time finding out, lol) – Lendlease

Yes, please email me for a demo - ethan [at] jwplayer [dot] com, thanks. – Runny