Dash плеер, как управлять качеством?

<div style='width: 500px'>
    <video src='' style='width: 100%' controls></video>
</div>
<script src="https://cdn.dashjs.org/v3.1.0/dash.all.min.js" rel="preload"></script>
<script>
   (pl = dashjs.MediaPlayer().create()).initialize(document.querySelector('video'), 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', true);
</script>

<div id='player'><svg viewBox='0 0 36 36' id='mt'><path d='M35.716 31.884a1.349 1.349 0 0 1-1.895.23L.517 6.011a1.35 1.35 0 1 1 1.667-2.125l33.252 26.05c.635.512.742 1.362.28 1.947z' fill='red'></path><path d='M3.6 15.3v5.4c0 1.492 1.21 2.65 2.7 2.65h4.717l7.589 6.745c.335.349.763.506 1.196.506.25 0 .504-.052.74-.16.65-.29 1.06-.931 1.06-1.64v-2.832L4.993 12.954c-.827.461-1.392 1.283-1.392 2.346zm16.945-9.741a1.803 1.803 0 0 0-1.937.296l-6.519 5.794 9.513 7.46V7.198c0-.708-.41-1.4-1.057-1.64zm6.266 8.273a1.35 1.35 0 0 0-1.708 2.092c.634.523 1 1.277 1 2.076a2.68 2.68 0 0 1-1.002 2.075 1.35 1.35 0 0 0-.44 1.428l1.21.95c.029.001.055.018.084.018.3 0 .604-.1.854-.304A5.37 5.37 0 0 0 28.803 18c0-1.614-.726-3.128-1.992-4.168zm3.404-4.158a1.35 1.35 0 1 0-1.712 2.088c1.909 1.563 3 3.836 3 6.238 0 2.402-1.094 4.674-2.999 6.239-.059.048-.09.114-.138.17l2.126 1.666c2.355-2.067 3.711-4.987 3.711-8.075 0-3.212-1.451-6.25-3.988-8.326z'></path></svg><video></video><div id='prg'></div></div>
<style>
   #player { max-width: 900px; margin: auto;  top: 30%; position: relative; width: 40%; box-shadow: 0 0 25px black}
   #player video { background: #ffffff; display: block; margin: auto; width: 100%;}
   #prg { position: absolute; bottom: 0; left: 0; width: 0; height: 5px; background: rgb(219 212 0);}
   #mt { display: block; fill: #000; background: #fff; padding: 5px; border-radius: 5px; height: clamp(50px, 10%, 100px); position: absolute; left: 10px; top: 10px; opacity: 1 !important; filter: drop-shadow(0 0 2px rgb(0, 0, 0, 31%)); cursor: pointer; z-index: 10;}
</style>
 
 
<script src='/dash.js' type='module' rel='preload'></script>
<script type="module">
    window.addEventListener('DOMContentLoaded', _ => {
        import { mediaPlayerEvents } from './dash.js-development/src/streaming/MediaPlayer.js';
        let v = player.querySelector('video');
        (dashjs.MediaPlayer().create()).initialize(v, '/test/dash.mpd', true);
        v['play']()?.catch(_ =>  {v.volume = 0; v.play()});
        mt.onclick = e => {mt.remove(); v.volume = 1}
        v.ontimeupdate = e => {(pr = _ => {prg.style.width = v.currentTime / (v.duration / 100) + "%"; requestAnimationFrame(pr)})()};
    });
</script>

<div style='width: 500px'>
    <video src='' style='width: 100%' controls></video>
</div>
<script src="https://cdn.dashjs.org/v3.1.0/dash.all.min.js" rel="preload"></script>
<script>
    const player = dashjs.MediaPlayer().create();
    player.initialize(document.querySelector('video'), 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', true);
    // этот код я добавил для демонстрации что функция getQualityFor уже есть в плеере
    console.log(typeof player.getQualityFor) // function
</script>
</html>

в переменной dashjs.MediaPlayer.events есть список всех поддерживаемых событий конкретной версией плеера
<div style='width: 500px'>
    <video src='' style='width: 100%' controls></video>
</div>
<script src="https://cdn.dashjs.org/v3.1.0/dash.all.min.js" rel="preload"></script>
<script>
    const player = dashjs.MediaPlayer().create();
    player.initialize(document.querySelector('video'), 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', true);
    // событие сработает как только плеер загрузится и будет доступно проигрывание видео
     player.on("canPlay",()=> console.log("canPlay"))
     // так можно вывести все доступные события и посмотреть их в консоли dev tools
    console.log(dashjs.MediaPlayer.events)
</script>
</html>