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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay