title: VideoJS has no quality level / can't select qualities despite overrideNative in Safari desktop
body: <p>I am building a NextJS site that plays HLS videos.</p>
  <hr />
  <p><strong>TLDR; how to override Safari's native HLS engine? What are the player options needed? Mine (below) did not work!</strong></p>
  <hr />
  <p>To switch between qualities, I am using: <a href="https://github.com/videojs/videojs-contrib-quality-levels" rel="nofollow noreferrer">https://github.com/videojs/videojs-contrib-quality-levels</a></p>
  <p>In other browsers (not Safari), the quality selector works fine, as the <code>player.qualityLevels()</code> contains the desired qualities.</p>
  <p>However, in Safari (desktop), the array (<code>qualityLevels()</code>) is empty and thus I can't switch between qualities.</p>
  <p>I have this <code>playerOption</code> here:</p>
  <pre><code>const videoJsOptions = {
      autoplay: false,
      preload: &quot;auto&quot;,
      controls: true,
      poster: thumbnailURL,
      sources: [
          {
              src: liveURL,
              type: &quot;application/x-mpegURL&quot;,
              withCredentials: false,
          },
      ],
      html5: {
          nativeAudioTracks: false,
          nativeVideoTracks: false,
          hls: {
              overrideNative: true,
          },
      },
  };
  </code></pre>
  <p>This works well for this person's project (not react though): <a href="https://jsfiddle.net/geukvmhn/" rel="nofollow noreferrer">https://jsfiddle.net/geukvmhn/</a></p>
  <p>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).</p>