Playback speed controls with video-js are not showing?

Question

I am trying to add controls to a video.js player to allow the user to change the playback speed. According to their documentation, I should be able to pass an array with the playback rates I want to offer to the user. For instance: playbackRates: [0.5, 1, 1.5, 2].

I have found this similar question who suggests doing exactly what the doc says. This answer links to a snippet which many have claimed that works. Unfortunately, this snippet does not show any controls to change playback speed. Here is what I see when running the snipped. I tried implementing a simple player with playback speeds on my own and it does not allow me to change playback speed:

<video class="video-js" autoplay controls data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

What exactly am I doing wrong? Is video.js not supporting this anymore?

misterben · Answer 1 · 2021-02-08T18:34:51.847

It's supported. The snippet doesn't work (it doesn't even init Video.js) because it uses http rather than https URLs for the player script and CSS. That's an old example, browsers weren't as strict about mixed http/https back then. It's also a very old version of Video.js - 7.11.4 is currently the latest.

Example with 7.11.4:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

<video-js 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] }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video-js>

https://codepen.io/mister-ben/pen/ZEBOyYG

Would you happen to have any example of this working? I followed exactly what the documentation shows and it does not show up. — ThomasFromUganda, Feb 08 '21 at 02:14

score -1 · Answer 2 · edited Feb 16 '23 at 18:55

-1

Enable video player rate worked for me this way if it helps! You just hover over the display description (under styles on the right) to enable or disable you may have to use ctrl + shift + I to access the inspect page

Here's a snap for better help

edited Feb 16 '23 at 18:55

cigien

57,834
11
73
112

answered Feb 16 '23 at 18:42

STEVO

1
1

I don't understand, how does that show users the playback controls? Sounds more like something a developer can do for debugging. Does this really address the question? – Moritz Ringler Feb 21 '23 at 17:33
The answer seems to be using the dev tools to show the player controls rather than fixing it in the app. – rtucker88 Feb 21 '23 at 19:15

score -1 · Answer 3 · edited Aug 04 '23 at 19:31

Check if you have "playbackRateMenuButton" item defined in the controlBar.children object.

var options = {
    controls: true,
    autoplay: false,
    muted: true,
    preload: 'metadata',
    loop: true,
    fluid: true,
    controlBar: {
        children: [
            'playToggle',
            'progressControl',
            'volumePanel',
            'playbackRateMenuButton', <--- this bit here
            'qualitySelector',
            'fullscreenToggle',
        ],
    },
    playbackRates: [0.5, 1, 1.5, 2]
};

var player = videojs('my-player', options, function() {
});

This is what did it for me.

Playback speed controls with video-js are not showing?

3 Answers3