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

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]
});

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

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;

Answer 4

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

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

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