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.