VideoJS has no quality level / can't select qualities despite overrideNative in Safari desktop

user_9786502 0
Viewed 1732

I am building a NextJS site that plays HLS videos.

TLDR; how to override Safari's native HLS engine? What are the player options needed? Mine (below) did not work!

To switch between qualities, I am using: https://github.com/videojs/videojs-contrib-quality-levels

In other browsers (not Safari), the quality selector works fine, as the player.qualityLevels() contains the desired qualities.

However, in Safari (desktop), the array (qualityLevels()) is empty and thus I can't switch between qualities.

I have this playerOption here:

const videoJsOptions = {
    autoplay: false,
    preload: "auto",
    controls: true,
    poster: thumbnailURL,
    sources: [
        {
            src: liveURL,
            type: "application/x-mpegURL",
            withCredentials: false,
        },
    ],
    html5: {
        nativeAudioTracks: false,
        nativeVideoTracks: false,
        hls: {
            overrideNative: true,
        },
    },
};

This works well for this person's project (not react though): https://jsfiddle.net/geukvmhn/

Check it out in Safari; the qualities are shown, but it doesn't work at all for me. Basically, I am struggling to override the native HLS engine in Safari (desktop).

video.js http-live-streaming next.js reactjs safari
1 Answers

There are at least two things going on here.

Firstly, the option hls: { overrideNative: true } is not working. it's deprecated but ought to work, but changing to the current vhs: { overrideNative: true } does work.

Secondly, and on other browsers too, the quality menu sometimes contains no qualities. Intitialising it in the useEffect hook is probably happening at the wrong time, sometimes. I'd move plugin initialisation and loading of the source into the player ready callback, to control the order.

function onPlayerReady() {
  this.qualityLevels();
  this.src({
    src: liveURL,
    type: "application/x-mpegURL",
    withCredentials: false
  });
  this.hlsQualitySelector({ displayCurrentQuality: true });
}
user_7402330
Related