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

1 year ago

#242528

Berend

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.

javascript

dynamic

hls.js

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs