10

Is there any existing plugin to change the playback rate of a video using the video.js player? If not, how can I add the new plugin and the new control button for the same?

Thanks in advance.

Aditya
  • 113
  • 1
  • 1
  • 5

3 Answers3

17

From videojs v.4.6.0 on there is a JSON parameter for data-setup that you can pass to add the playback speed option to the videoplayer: 

<video id="my_video_1" class="video-js vjs-default-skin" controls 
preload="auto" width="640" height="268" 
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>

Demo: http://jsbin.com/vikun/1/edit?html,output

Credits: https://stackoverflow.com/a/24767026/1066234

Note: You must use double quotes for the parameters within data-setup.

-

Helpful: If you need to change the speed after the videoplayer is ready (Jquery), use:

var video = videojs('videoplay', options);

video.ready(function() {
    // faster speed initially
    this.playbackRate(1.5);
});
Avatar
  • 14,622
  • 9
  • 119
  • 198
14

I've the same issue. I just found that:

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

see videojs docs

Avatar
  • 14,622
  • 9
  • 119
  • 198
Chris
  • 156
  • 1
  • 2
  • This seems now deprecated. There's support for playback rate on core now. More here: https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#playbackrate-rate- – Meetai.com Jun 12 '15 at 04:08
  • 2
    @Meetai.com: That link is now broken. Current one: https://github.com/videojs/video.js/blob/064c1be2ba8a98a7c49b3ec54cbcff70bf7c03e6/docs/guides/options.md#playbackrates – Voicu Apr 10 '18 at 17:59
  • videojs('my-player', { playbackRates: [0.5, 1, 1.5, 2] }); – JoePC Jun 27 '18 at 17:07
0
var player = videojs('videoplay');
player.ready(function() {
   var _this = this
   var playbackRate = $("#playbackRate").val();
   var speed = parseFloat(playbackRate);

   var volume = parseFloat($("#volume").val()/100.0); //[0,100]

   setTimeout(function() {
       _this.playbackRate(speed);
       _this.volume(volume); //work for audio
   },20);
});
player.src('/media/'+data.uuid+'.m3u8');
player.play();

above code works for me in production env, it's really hard to understand why should we delay for a moment before play audio stream.

passedbylove
  • 1
  • 1