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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs