Is there a way to replace the default labels for speed options?

[carlos.salmanca]

Product

Player

Question

I’m trying to create a custom ui config for UIManager, and for the PlaybackSpeedSelectBox I’m trying to set new items but there isn’t too much documentation about it. Here is what i have so far:

const playbackSpeedSelectBox = new PlaybackSpeedSelectBox({
    id: 'speed-select-box',
    items: [
      { key: '0.25', label: 'Very Slow' },
      { key: '0.5', label: 'Slow' },
      { key: '1', label: '1x'},
    ],
  });

[ludovic.michaud (Ludo)]

Hi,
You could either fork our UI and modify the default values or do something like this to update playback speeds on the fly :

    var updateSpeed = function() {
        for (var i = 0; i < document.querySelector(".bmpui-ui-playbackspeedselectbox").options.length; i++) {
            console.log(document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value)
            if (document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value < 0.5) {
                document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].innerHTML = "super slow"
            } else if (document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value < 1) {
                document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].innerHTML = "slow"
            } else if (document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value > 1.5) {
                document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].innerHTML = "super fast"
            } else if (document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value > 1) {
                document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].innerHTML = "fast"
            } else if (document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].value === 1) {
                document.querySelector(".bmpui-ui-playbackspeedselectbox").options[i].innerHTML = "normal"
            }
            player.off("segmentrequestfinished", updateSpeed)
        }
    }

    player.load(source).then(function() {
        console.log('Successfully loaded source'); // Success!
        player.on("segmentrequestfinished", updateSpeed)
    }, function() {
        console.log('Error while loading source'); // Error!
    });