Video quality selector not working in iPhone and mac safari

Ankur Nama — Fri, 10 May 2024 05:22:35 +0000

I have added the option to change the video quality in the video player. It works in Chrome and Windows browsers but it is not working in iPhone and Mac Safari, only the button shows, and options are not visible. Can anyone help me with this issue?

<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>

DEV Community: Ankur Nama

Video quality selector not working in iPhone and mac safari