Seperate isSupported export and dynamic import.

[JWesorick]

(I may be missing something but) I'm trying to dynamically import hls.js in my project so it's only downloaded when the user wants to watch a video. On iOS Safari hls is natively supported and this package is not needed. My code looks something like this:

function onClick () => {
      import("hls.js").then(({ default: Hls }) => {
        if (!Hls.isSupported()) {
          videoElement.src = src;
          videoElement.play();
          return;
        }

        // else do HLS.js setup stuff.
      });
}

This is giving me two issues. One, I still am importing hls.js on iOS Safari even though it's not needed. Two, where I am calling .play() doesn't actually work. It's too late I guess to do it after the dynamic import. It needs to be before the dynamic import for Safari to allow it.

My solution right now is to just not dynamically import hls.js. But what would be nice is if the isSuported function was exported on it's own allowing be to still dynamically import the rest of the package and only needing to import it when it's actually needed.

Did I miss something? Am I doing it wrong? Thanks.

[JWesorick]

I was able to do

import { isSupported } from "hls.js/src/is-supported";

and add configuration to my project to make sure that file is compiled.

[JWesorick]

Ok actually this didn't work either and resulted in _typeOf is not defined when trying to play a video.