DEV Community

Ankur Nama
Ankur Nama

Posted on

Video quality selector not working in iPhone and mac safari

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>
Enter fullscreen mode Exit fullscreen mode

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay