Search code examples
javascriptjqueryhtmljwplayerjwplayer6

How to change playback rate in jwplayer


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 HTML5 structure of jwplayer


Solution

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