Server-side rendering

<LivePlayer> renders on the server. The <video> element and control shell are part of the server HTML; engines and the IMA SDKs are created / dynamically imported only inside a client-side effect, so no browser global is touched during SSR.

Details that make hydration deterministic:

• muted — the prop value is used for the first render so server and client hydration agree; a persisted preference (localStorage), when present, is applied on mount and takes precedence on the client.
• Lazy engine load — shaka-player is loaded via dynamic import the first time a player starts. It never executes during SSR, and hydration completes before any playback work begins.

Validation

The demo on this site is server-rendered by TanStack Start and hydrated in the browser. View the page source: the <video> and control shell are in the server HTML. After hydration, Shaka loads lazily and live playback starts — with no hydration mismatch. There is also a dedicated hydration test in the package (LivePlayer.hydration.test.tsx).