If you don't find an answer, please click here to post your question.
Reply
Occasional Contributor
Posts: 5
Registered: ‎01-26-2018

Cannot Get Variable Speed Controls To Display

Hi, 

 

I've been asked to turn on the new variable speed controls feature. We are using a V4 player and I have been following this guide in the documentation.

 

No matter what I do, I can't seem to get the variable speed control icon to display. I have tried:

 

1) Turning on the controls via the skin.inline parameter at player creation

2) Downloading the latest skin.json file, adding the playbackspeed button and loading the json via the skin.config parameter

 

When I inspect the DOM, I can see what appears to be the element for the variable controls, but there is nothing visibly rendered:

<div class="oo-popover-button-container">
    <button type="button" class="oo-control-bar-item oo-playback-speed oo-focusable-btn" tabindex="0" data-focus-id="playbackSpeed" aria-label="Speed" aria-haspopup="true">
        <span class="oo-current-speed oo-icon">2x</span>
    </button>
</div>

One thing unique about our implementation is that we are integrating 3Play Media transcriptions. Unsure if that would have anything to do with this issue, but I thought I'd mention it. 

 

Am I missing the font icon or something? Any ideas?

Visitor
Posts: 1
Registered: ‎09-13-2018

Re: Cannot Get Variable Speed Controls To Display

Hello,

I've manage to do a small demo (Ooyala debug page) with the guide.

In order to get this done, you'll need to add the whole desktopContent with the appropriate playbackSpeed option.

You can see the example here:

This is the structure:

var playerParam = {
  "skin": {
    "inline": {"buttons":{"desktopContent":[{"name":"playPause","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"volume","location":"controlBar","whenDoesNotFit":"keep","minWidth":240},{"name":"live","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"timeDuration","location":"controlBar","whenDoesNotFit":"drop","minWidth":145},{"name":"flexibleSpace","location":"controlBar","whenDoesNotFit":"keep","minWidth":1},{"name":"playbackSpeed","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"share","location":"controlBar","whenDoesNotFit":"moveToMoreOptions","minWidth":45},{"name":"discovery","location":"controlBar","whenDoesNotFit":"moveToMoreOptions","minWidth":45},{"name":"closedCaption","location":"controlBar","whenDoesNotFit":"moveToMoreOptions","minWidth":45},{"name":"quality","location":"controlBar","whenDoesNotFit":"moveToMoreOptions","minWidth":45},{"name":"logo","location":"controlBar","whenDoesNotFit":"keep","minWidth":125},{"name":"stereoscopic","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"audioAndCC","location":"controlBar","whenDoesNotFit":"moveToMoreOptions","minWidth":45},{"name":"fullscreen","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"moreOptions","location":"controlBar","whenDoesNotFit":"keep","minWidth":45},{"name":"arrowsBlack","location":"mainView","whenDoesNotFit":"keep","minWidth":45}]}}
};

I just added the following within the default button:

{"name":"playbackSpeed","location":"controlBar","whenDoesNotFit":"keep","minWidth":45}

Can you share the inline config you are using?

Occasional Contributor
Posts: 5
Registered: ‎01-26-2018

Re: Cannot Get Variable Speed Controls To Display

Turns out my issue was related to some custom CSS on the page that was hiding the .oo-popover-button-container class. Whoops. :)