Make player render interstitials in a separate video element.

[matvp91]

It should be behind a feature flag.

With 3 video elements we can switch to interstitials without having to unload MSE and recreate it for a new HLS.js instance when interstitials come by.

hls.media exposes the main video element. We can insert two other video elements after (there's this API: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) and use the HLS.js INTERSTITIAL_ASSET_PLAYER_CREATED event to grab the interstitials HLS.js instance, and attach our own media to it.

We'll use 1 media element for the "primary content" and toggle between the two others for interstitials purposes, eg:

• interstitial 1 uses media element 2
• interstitial 2 uses media element 3
• interstitial 3 uses media element 2
• interstitial 4 uses media element 3
• primary uses media element 1

[matvp91]

For ref, we have a "proof of concept" available at https://github.com/matvp91/mixwave/blob/main/packages/player/src/facade/media-manager.ts.

Facade supports options.multipleVideoElements now.

Let's leave this open until we have a proper implementation. I'll check with HLS.js maintainers to ensure this is the right implementation.

[matvp91]

There's a new branch, #135, where we'll simplify the player package.

• It'll no longer be a "full" player, we're going to remove the React components.
• We'll drop the idea of a facade and provide a wrapper HlsPlayer instead.
• Provide bindings for https://github.com/muxinc/media-chrome, as we'd still want a UI.