'Hls.js works with a static script tag, but not dynamic

I'm trying to dynamically load the Hls.js library in a (typescript) webpage. When I use a static <script> tag inside <head>, it works without a problem, but when I try to load Hls at runtime it fails with the message Hls is not defined

So this works:

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script>
console.log(Hls.isSupported());
</script>

But this doesn't (jQuery):

$.getScript("https://cdn.jsdelivr.net/npm/hls.js", (script, status, xhr) => { 
    console.log(Hls.isSupported());
});

And neither does a more traditional approach:

const script = document.createElement("script");
script.setAttribute("src", "https://cdn.jsdelivr.net/npm/hls.js");
script.onload = () => {
    console.log(Hls.isSupported());
}
document.body.appendChild(script);

In both cases, I can see the script being downloaded and showing up in the browser's Debugger pane (F12), but Hls is not defined.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Hls.js works with a static script tag, but not dynamic

Sources

Related Questions