vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.75k stars 154 forks source link

Polyfilled scripts don't load if there aren't <script> tags #380

Open zshall opened 5 months ago

zshall commented 5 months ago

The problem:

I've been running into issues using Vime's HLS provider in SvelteKit on a browser that requires the hls.js library to function. My application is bundled with the output being <link rel="modulepreload" href="..."> tags, not <script src="..."></script> tags.

In the loadScript function which loads hls.js, line 62 queries for the first <script> tag on the page:

https://github.com/vime-js/vime/blob/c1f311950c52b5c49329873a6bb9739f3727223f/packages/core/src/utils/network.ts#L62

If there isn't one then the library can't be loaded.

A workaround:

You can modify SvelteKit's app.html to add an empty script tag which allows the loadSdk() call to work:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>// empty script tag to satisfy conditions for loadSdk();</script>
        %sveltekit.head%
    </head>
...

One potential fix may be that if there aren't any script elements a loaded library could be prepended to the <head> or appended to the <body>.