feat(packages): add chromecast support via remote playback API (#1348)

site/src/content/docs/reference/feature-cast.mdx

@@ -0,0 +1,52 @@
+---
+title: Cast
+description: Cast state and actions for the player store
+---
+
+import FeatureReference from "@/components/docs/api-reference/FeatureReference.astro";
+import DocsLink from "@/components/docs/DocsLink.astro";
+import FrameworkCase from "@/components/docs/FrameworkCase.astro";
+
+Controls casting to remote playback devices (e.g. Chromecast). Exits fullscreen before initiating a cast session.
+
+<FeatureReference feature="cast" />
+
+### Selector
+
+<FrameworkCase frameworks={["react"]}>
+Pass `selectCast` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to cast state. Returns `undefined` if the cast feature is not configured.
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+Pass `selectCast` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to cast state. Returns `undefined` if the cast feature is not configured.
+</FrameworkCase>
+
+<FrameworkCase frameworks={["react"]}>
+```tsx title="CastButton.tsx"
+import { selectCast, usePlayer } from '@videojs/react';
+
+function CastButton() {
+  const cast = usePlayer(selectCast);
+  if (!cast || cast.castAvailability !== 'available') return null;
+
+  return (
+    <button onClick={cast.toggleCast}>
+      {cast.castState === 'connected' ? 'Disconnect' : 'Cast'}
+    </button>
+  );
+}
+```
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+```ts title="cast-button.ts"
+import { createPlayer, MediaElement, selectCast } from '@videojs/html';
+import { videoFeatures } from '@videojs/html/video';
+
+const { PlayerController, context } = createPlayer({ features: videoFeatures });
+
+class CastButton extends MediaElement {
+  readonly #cast = new PlayerController(this, context, selectCast);
+}
+```
+</FrameworkCase>