7

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

Jeff Schaller
  • 2,352
  • 5
  • 23
  • 38
Sean Saoirse
  • 91
  • 5
  • 17
  • It should work, and as you've seen it does work elsewhere. A more complete [mcve] could help diagnose. – misterben Oct 25 '21 at 12:28
  • @misterben, Thanks for your comment. Here's the live version: https://codesandbox.io/s/quality-changer-m3ne7 On chrome (desktop), works fine.. but Safari (desktop) it doesn't. Exact same behaviour as what I have in my local. Btw im using videojs-hls-quality-selector too - to display the qualities populated by videojs-contrib-quality-levels. But to re-iterate the problem, in Safari there's no qualityLevels (qualities) to begin with. Any idea? Thx again. – Sean Saoirse Oct 26 '21 at 11:59

1 Answers1

5

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 });
}
misterben
  • 7,455
  • 2
  • 26
  • 47
  • Hey, thanks for your response. The vhs broke its ability to rewind, please see here on Safari: https://codesandbox.io/s/quality-changer-m3ne7?file=/src/index.js When you skip forward (lets say to minute 1), and go back (lets say to 30s), u can see that it wont go back, but rather jumps forward and basically the player is broken and cant play anymore. Any help?:/ – Sean Saoirse Nov 05 '21 at 11:31
  • Thank you for this answer, `vhs: { overrideNative: true }` got me on the right track trying to figure out why qualityLevels() did not work and always returned empty array on Samsung TVs – Sverrir Sigmundarson Feb 05 '23 at 01:28