Video quality selector not working in iPhone and mac safari

<video-js id="my-video" class="vjs-fluid" controls playsinline autoplay muted>
    <source src="https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8" type="application/x-mpegURL">
</video-js>

<script src="node_modules/video.js/dist/video.min.js"></script>
<script src="node_modules/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.js"></script>
<script type="text/javascript">
    function myDoubleClickHandler(event) {
        // `this` refers to the player in this context
        this.pause();
    }
</script>
<script type="module">
    var player = videojs('my-video', {
        autoplay: 'muted',
        techOrder: ['html5'], // Force non-native HLS playback
        enableSmoothSeeking: true,
        sources: [{
            src: 'https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8',
        }],
        // playbackRates: [0.5, 1, 1.5, 2],


        // disablePictureInPicture: true,
        enableSmoothSeeking: true,
        liveui: true,

        userActions: {
            // click: false,
            doubleClick: myDoubleClickHandler,
            hotkeys: function(event) {
                if (event.which === 32) {
                    if (this.paused()) {
                        this.play();
                    } else {
                        this.pause();
                    }
                }
            },
            // controlBar: {
            //     skipButtons: {
            //       forward: 5,
            //       backward: 10
            //     }
            // },

        },
    });
    (function (window, videojs) {
      // var examplePlayer = window.examplePlayer = videojs('my-video');
      var hlsQualitySelector = window.hlsQualitySelector = player.hlsQualitySelector({
        displayCurrentQuality: false,
      });
    }(window, window.videojs));
</script>