videojs-contrib-quality-levels plugin doesn't work on Android Chrome and iOS mobile Safari!

[maryam-abdullah]

Hey there,

I'm using the videojs-contrib-quality-levels plugin in order to have a quality button. However, my code works on desktop but not on mobile for both Android Chrome and iOS Safari where the quality button isn't even visible.

Check it out, please.

<script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/video.js"></script>
  <script src="js/videojs-contrib-hls.js"></script>
  <script src="js/videojs-contrib-quality-levels.min.js"></script>
<script>
    var options = {
        inactivityTimeout:0,
        controls:true,
        autoplay:true,
        preload:"auto",
    };

    var player = videojs('my_video', options);
    player.src({
      src: 'http://www.streambox.fr/playlists/test_001/stream.m3u8',
      type: 'application/x-mpegURL'
    });

    var qLevels = [];

    player.qualityLevels().on('addqualitylevel', function(event) {
        var quality = event.qualityLevel;
        console.log(quality);

        if (quality.height != undefined && $.inArray(quality.height, qLevels) === -1)
        {
            quality.enabled = true;

            qLevels.push(quality.height);

            if (!$('.quality_ul').length)
            {
                var h = '<div class="quality_setting vjs-menu-button vjs-menu-button-popup vjs-control vjs-button">' + '<button class="vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-live="polite" aria-disabled="false" title="Quality" aria-haspopup="true" aria-expanded="false">' + '<div aria-hidden="true" class="vjs-icon-cog"></div>' + '<span class="vjs-control-text">Quality</span></button>' + '<div class="vjs-menu"><ul class="quality_ul vjs-menu-content" role="menu"></ul></div></div>';
                $(".vjs-fullscreen-control").before(h);
            } else {
                $('.quality_ul').empty();
            }

            qLevels.sort();
            qLevels.reverse();

            var j = 0;

            $.each(qLevels, function(i, val) {
                $(".quality_ul").append('<li class="vjs-menu-item" tabindex="' + i + '" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="false" bitrate="' + val +'"><span class="vjs-menu-item-text">' + val + 'p</span></li>');
                j = i;
            });

            $(".quality_ul").append('<li class="vjs-menu-item vjs-selected" tabindex="' + (j + 1) + '" role="menuitemcheckbox" aria-live="polite" aria-disabled="false" aria-checked="true" bitrate="auto">' + '<span class="vjs-menu-item-text">Auto</span></li>');
        }
    });

    $("body").on("click", ".quality_ul li", function() {
        $(".quality_ul li").removeClass("vjs-selected");
        $(".quality_ul li").prop("aria-checked", "false");

        $(this).addClass("vjs-selected");
        $(this).prop("aria-checked", "true");

        var val = $(this).attr("bitrate");

        var qualityLevels = player.qualityLevels();

        for (var i = 0; i < qualityLevels.length; i++)
        {
            qualityLevels[i].enabled = (val == "auto" || (val != "auto" && qualityLevels[i].height == val));
        }
    });

</script>

Any thoughts?

I actually tried to add the below lines: videojs.options.hls.overrideNative = true; videojs.options.html5.nativeAudioTracks = false; videojs.options.html5.nativeVideoTracks = false;

As a result, the quality button became visible on Chrome (Android) but nothing's changed for Safari (Mobile).

Thanks in advance.

[mjneil]

Hi @maryam-abdullah to get the qualityLevels on Android Chrome, you are doing the correct thing by setting the overrideNative option. Unfortunately Safari on iOS does not support MSE, so we cannot support qualityLevels on that platform as the only way to playback HLS is through iOS native playback.

[maryam-abdullah]

I see.

I have set overrideNative to true, however, the video still didn't start automatically on Android Chrome. Do you know why?

Thank you.

[ValentinePolessky]

Still receive wrong behaviour on chrome android, safari ios Tried different variants with overrideNative

[stewartmegaw]

Same here

[m98]

@ValentinePolessky How did you finally solved it? can you share some code?

[shubhamt619-ceryx]

echo "Its working now !"

[sarah-harissa]

is there a way to use videojs-contrib-quality-levels plugin with out this option videojs.options.hls.overrideNative = true;?