Having some issues with getting Bit-rate option to work

[z9fr]

I have been trying to implement a video player where I can allow user to select the bit-rate they prefer like in the reference player

https://reference.dashif.org/dash.js/latest/samples/dash-if-reference-player/index.html

I have a relatively simple implementation

function init() {
    const url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
    const video = document.querySelector(".fs-player video");
    const player = dashjs.MediaPlayer().create();

    player.initialize(video, url, true);
    player.attachView(video);
    player.updateSettings({
        debug: { logLevel: 4 },
        streaming: {
            abr: { autoSwitchBitrate: { video: false } },
        },
    });

    /* restart playback in muted mode when auto playback was not allowed by the browser */
    player.on(dashjs.MediaPlayer.events.PLAYBACK_NOT_ALLOWED, function () {
        console.log(
            "Playback did not start due to auto play restrictions. Muting audio and reloading"
        );
        video.muted = true;
        // controlbar.setVolume(0);
        player.initialize(video, url, true);
    });

    const controlbar = new ControlBar(player);
    controlbar.initialize();

    const version = player.getVersion();
    console.log(version);
}

This is how my init function looks like,

What I'm mostly confused about is the below part in the ControlBar

    var createBitrateSwitchMenu = function () {
        var contentFunc;

        if (bitrateListBtn) {
            destroyMenu(
                bitrateListMenu,
                bitrateListBtn,
                menuHandlersList.bitrate
            );
            bitrateListMenu = null;
            var availableBitrates = { menuType: "bitrate" };
            availableBitrates.audio =
                (self.player.getRepresentationsByType &&
                    self.player.getRepresentationsByType("audio")) ||
                [];
            availableBitrates.video =
                (self.player.getRepresentationsByType &&
                    self.player.getRepresentationsByType("video")) ||
                [];
            availableBitrates.images =
                (self.player.getRepresentationsByType &&
                    self.player.getRepresentationsByType("image")) ||
                [];

Here as you can see to get the availableBitrates the ControlBar will call the self.player.getRepresentationsByType method but there is no implementation for this in the player instance.

I tried adding some debug logs and what I found out was there is a implementation but with a different name to get the bit-rate

            console.log(self.player.getBitrateInfoListFor("video"));
            console.log(self.player?.getRepresentationsByType("video"));

In this case as you can see first one will result in this response but the second methord in the ControlBar will result in not a function error.

[{"mediaType":"video","bitrate":300000,"width":640,"height":360,"scanType":null,"qualityIndex":0},{"mediaType":"video","bitrate":3000000,"width":1920,"height":1080,"scanType":null,"qualityIndex":1}] [rr.js:632:21](http://localhost:3030/static/rr.js)
Uncaught (in promise) TypeError: self.player.getRepresentationsByType is not a function

currently I am using the version 4.7.4 for my implementation.

[dsilhavy]

You are mixing version 4 and version 5 APIs.

For version 4 use this controlbar: https://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/ControlBar.js and getBitrateInfoListFor

In version 5 we introduce the method getRepresentationsByType.

[z9fr]

Thank you so much. that seems to be the issue. My bad

Thanks for helping out. 🙂