diff --git a/apps/sandbox/app/shared/html/skin-tags.ts b/apps/sandbox/app/shared/html/skin-tags.ts
index b51be993..730f408e 100644
--- a/apps/sandbox/app/shared/html/skin-tags.ts
+++ b/apps/sandbox/app/shared/html/skin-tags.ts
@@ -11,3 +11,14 @@ export const TAILWIND_SKIN_TAGS: SkinTagMap = {
   default: { video: 'video-skin-tailwind', audio: 'audio-skin-tailwind' },
   minimal: { video: 'video-minimal-skin-tailwind', audio: 'audio-minimal-skin-tailwind' },
 };
+
+/** Custom element tag names for the live HLS video preset (`@videojs/html/live-video` skins). */
+export const LIVE_VIDEO_CSS_SKIN_TAGS: Record<Skin, string> = {
+  default: 'live-video-skin',
+  minimal: 'live-video-minimal-skin',
+};
+
+export const LIVE_VIDEO_TAILWIND_SKIN_TAGS: Record<Skin, string> = {
+  default: 'live-video-skin-tailwind',
+  minimal: 'live-video-minimal-skin-tailwind',
+};
diff --git a/apps/sandbox/app/shared/html/skins.ts b/apps/sandbox/app/shared/html/skins.ts
index 8b68e14c..d6d63a57 100644
--- a/apps/sandbox/app/shared/html/skins.ts
+++ b/apps/sandbox/app/shared/html/skins.ts
@@ -1,5 +1,10 @@
 import type { Skin, Styling } from '@app/types';
-import { CSS_SKIN_TAGS, TAILWIND_SKIN_TAGS } from './skin-tags';
+import {
+  CSS_SKIN_TAGS,
+  LIVE_VIDEO_CSS_SKIN_TAGS,
+  LIVE_VIDEO_TAILWIND_SKIN_TAGS,
+  TAILWIND_SKIN_TAGS,
+} from './skin-tags';
 import { loadAudioStylesheets, loadVideoStylesheets } from './stylesheets';
 
 async function loadVideoCssSkin(skin: Skin): Promise<string> {
@@ -58,7 +63,50 @@ async function loadAudioTailwindSkin(skin: Skin): Promise<string> {
   return TAILWIND_SKIN_TAGS[skin].audio;
 }
 
-export function loadVideoSkinTag(skin: Skin, styling: Styling): Promise<string> {
+async function loadLiveVideoCssSkin(skin: Skin): Promise<string> {
+  if (skin === 'default') {
+    await import('@videojs/html/live-video/skin');
+  } else {
+    await import('@videojs/html/live-video/minimal-skin');
+  }
+
+  loadVideoStylesheets(skin);
+
+  return LIVE_VIDEO_CSS_SKIN_TAGS[skin];
+}
+
+async function loadLiveVideoTailwindSkin(skin: Skin): Promise<string> {
+  if (skin === 'default') {
+    const { LiveVideoSkinTailwindElement } = await import('@videojs/html/live-video/skin.tailwind');
+    const { getTailwindStyles } = await import('./tailwind-setup');
+
+    LiveVideoSkinTailwindElement.styles = getTailwindStyles();
+  } else {
+    const { MinimalLiveVideoSkinTailwindElement } = await import('@videojs/html/live-video/minimal-skin.tailwind');
+    const { getTailwindStyles } = await import('./tailwind-setup');
+
+    MinimalLiveVideoSkinTailwindElement.styles = getTailwindStyles();
+  }
+
+  return LIVE_VIDEO_TAILWIND_SKIN_TAGS[skin];
+}
+
+type VideoSkinOptions = { live?: boolean };
+
+/**
+ * Loads and registers the video skin for the given skin / styling combination
+ * and returns its custom element tag name. Pass `live: true` to swap in the
+ * `live-video` skin variant (same feature set, trimmed time UI).
+ */
+export function loadVideoSkinTag(
+  skin: Skin,
+  styling: Styling,
+  { live = false }: VideoSkinOptions = {}
+): Promise<string> {
+  if (live) {
+    return styling === 'tailwind' ? loadLiveVideoTailwindSkin(skin) : loadLiveVideoCssSkin(skin);
+  }
+
   return styling === 'tailwind' ? loadVideoTailwindSkin(skin) : loadVideoCssSkin(skin);
 }
 
diff --git a/apps/sandbox/app/shared/react/providers.ts b/apps/sandbox/app/shared/react/providers.ts
index 8e6980f9..65be1ebe 100644
--- a/apps/sandbox/app/shared/react/providers.ts
+++ b/apps/sandbox/app/shared/react/providers.ts
@@ -3,6 +3,8 @@ import { audioFeatures } from '@videojs/react/audio';
 import { backgroundFeatures } from '@videojs/react/background';
 import { videoFeatures } from '@videojs/react/video';
 
+// The `live-video` preset currently shares `videoFeatures`, so the same provider
+// works for both live and VOD playback — only the skin swaps on the source.
 export const { Provider: VideoProvider } = createPlayer({
   features: videoFeatures,
 });
diff --git a/apps/sandbox/app/shared/react/skins.tsx b/apps/sandbox/app/shared/react/skins.tsx
index cf8c2cf3..998670f4 100644
--- a/apps/sandbox/app/shared/react/skins.tsx
+++ b/apps/sandbox/app/shared/react/skins.tsx
@@ -20,6 +20,22 @@ async function loadVideoSkinComponent(skin: Skin, styling: Styling): Promise<Com
   return module.MinimalVideoSkin;
 }
 
+async function loadLiveVideoSkinComponent(skin: Skin, styling: Styling): Promise<ComponentType<VideoSkinProps>> {
+  const module = await import('@videojs/react/live-video');
+
+  if (styling === 'tailwind') {
+    return skin === 'default' ? module.LiveVideoSkinTailwind : module.MinimalLiveVideoSkinTailwind;
+  }
+
+  if (skin === 'default') {
+    await import('@videojs/react/live-video/skin.css');
+    return module.LiveVideoSkin;
+  }
+
+  await import('@videojs/react/live-video/minimal-skin.css');
+  return module.MinimalLiveVideoSkin;
+}
+
 async function loadAudioSkinComponent(skin: Skin, styling: Styling): Promise<ComponentType<AudioSkinProps>> {
   const module = await import('@videojs/react/audio');
 
@@ -66,10 +82,17 @@ function useLoadedComponent<Props>(
   return component;
 }
 
-type VideoSkinComponentProps = { skin: Skin; styling: Styling } & VideoSkinProps;
+type VideoSkinComponentProps = { skin: Skin; styling: Styling; live?: boolean } & VideoSkinProps;
 
-export function VideoSkinComponent({ skin, styling, ...props }: VideoSkinComponentProps) {
-  const Component = useLoadedComponent(() => loadVideoSkinComponent(skin, styling), [skin, styling]);
+/**
+ * Loads the video skin for the given skin/styling. When `live` is true,
+ * the `live-video` skin variant is used instead.
+ */
+export function VideoSkinComponent({ skin, styling, live = false, ...props }: VideoSkinComponentProps) {
+  const Component = useLoadedComponent(
+    () => (live ? loadLiveVideoSkinComponent(skin, styling) : loadVideoSkinComponent(skin, styling)),
+    [skin, styling, live]
+  );
 
   if (!Component) return null;
 
diff --git a/apps/sandbox/app/shared/sources.ts b/apps/sandbox/app/shared/sources.ts
index 752050d1..12dc1294 100644
--- a/apps/sandbox/app/shared/sources.ts
+++ b/apps/sandbox/app/shared/sources.ts
@@ -36,6 +36,7 @@ export const SOURCES = {
     url: 'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8',
     type: 'hls',
     subType: 'mp4',
+    live: true,
   },
   'mp4-1': {
     label: 'MP4 - Dancing Dude',
@@ -66,12 +67,19 @@ export const DEFAULT_DASH_SOURCE: SourceId = 'dash-1';
 
 export const BACKGROUND_VIDEO_SRC = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4';
 
+/** Returns true when the given source represents a live stream and should use the live-video skin. */
+export function isLiveSource(id: SourceId): boolean {
+  return (SOURCES[id] as { live?: boolean }).live === true;
+}
+
 export function getPosterSrc(source: SourceId): string | undefined {
   const id = getMuxAssetId(source);
   return id ? `https://image.mux.com/${id}/thumbnail.jpg` : undefined;
 }
 
 export function getStoryboardSrc(source: SourceId): string | undefined {
+  // Storyboards aren't generated for live streams, so skip the request entirely.
+  if (isLiveSource(source)) return undefined;
   const id = getMuxAssetId(source);
   return id ? `https://image.mux.com/${id}/storyboard.vtt` : undefined;
 }
diff --git a/apps/sandbox/templates/cdn/main.ts b/apps/sandbox/templates/cdn/main.ts
index 464543ee..03a535a8 100644
--- a/apps/sandbox/templates/cdn/main.ts
+++ b/apps/sandbox/templates/cdn/main.ts
@@ -1,10 +1,10 @@
 import '@app/styles.css';
 import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
-import { CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
+import { CSS_SKIN_TAGS, LIVE_VIDEO_CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { loadAudioStylesheets, loadVideoStylesheets } from '@app/shared/html/stylesheets';
 import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
-import { BACKGROUND_VIDEO_SRC, getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+import { BACKGROUND_VIDEO_SRC, getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Preset, Skin } from '@app/types';
 
 const html = String.raw;
@@ -19,7 +19,7 @@ const loadLatest = createLatestLoader();
 // CDN module loading — mirrors the exact import graph of each CDN bundle.
 // ---------------------------------------------------------------------------
 
-async function loadCdnPreset(preset: Preset, skin: Skin) {
+async function loadCdnPreset(preset: Preset, skin: Skin, live: boolean) {
   switch (preset) {
     case 'video':
     case 'hls-video':
@@ -27,8 +27,13 @@ async function loadCdnPreset(preset: Preset, skin: Skin) {
     case 'native-hls-video':
     case 'simple-hls-video':
     case 'dash-video':
-      if (skin === 'minimal') await import('@videojs/html/cdn/video-minimal');
-      else await import('@videojs/html/cdn/video');
+      if (live) {
+        if (skin === 'minimal') await import('@videojs/html/cdn/live-video-minimal');
+        else await import('@videojs/html/cdn/live-video');
+      } else {
+        if (skin === 'minimal') await import('@videojs/html/cdn/video-minimal');
+        else await import('@videojs/html/cdn/video');
+      }
       break;
     case 'audio':
     case 'mux-audio':
@@ -74,9 +79,10 @@ function getPlayerTag(preset: Preset): string {
   return 'video-player';
 }
 
-function getSkinTag(preset: Preset, skin: Skin): string {
+function getSkinTag(preset: Preset, skin: Skin, live: boolean): string {
   if (preset === 'background-video') return 'background-video-skin';
   if (preset === 'audio' || preset === 'mux-audio') return CSS_SKIN_TAGS[skin].audio;
+  if (live) return LIVE_VIDEO_CSS_SKIN_TAGS[skin];
   return CSS_SKIN_TAGS[skin].video;
 }
 
@@ -112,9 +118,17 @@ function isVideoPreset(preset: Preset): boolean {
   );
 }
 
+function canPlayLive(preset: Preset): boolean {
+  return (
+    preset === 'hls-video' || preset === 'mux-video' || preset === 'native-hls-video' || preset === 'simple-hls-video'
+  );
+}
+
 async function render() {
+  const live = canPlayLive(preset) && isLiveSource(state.source);
+
   await loadLatest(async () => {
-    await loadCdnPreset(preset, state.skin);
+    await loadCdnPreset(preset, state.skin, live);
     await loadCdnMedia(preset);
   });
 
@@ -122,13 +136,14 @@ async function render() {
 
   const root = document.getElementById('root')!;
   const playerTag = getPlayerTag(preset);
-  const skinTag = getSkinTag(preset, state.skin);
+  const skinTag = getSkinTag(preset, state.skin, live);
   const mediaTag = getMediaTag(preset);
   const source = SOURCES[state.source];
   const storyboard = isVideoPreset(preset) ? getStoryboardSrc(state.source) : undefined;
   const poster = isVideoPreset(preset) ? getPosterSrc(state.source) : undefined;
 
   const sourceAttr = preset === 'background-video' ? `src="${BACKGROUND_VIDEO_SRC}"` : `src="${source.url}"`;
+  const liveAttrs = live ? 'autoplay muted' : '';
 
   // Background video needs viewport dimensions instead of flex centering.
   if (preset === 'background-video') {
@@ -163,7 +178,7 @@ async function render() {
   root.innerHTML = html`
     <${playerTag}>
       <${skinTag} class="aspect-video max-w-4xl mx-auto">
-        <${mediaTag} ${sourceAttr} playsinline crossorigin="anonymous">
+        <${mediaTag} ${sourceAttr} ${liveAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </${mediaTag}>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
diff --git a/apps/sandbox/templates/html-hls-video/main.ts b/apps/sandbox/templates/html-hls-video/main.ts
index b9f9b974..2bbdb93c 100644
--- a/apps/sandbox/templates/html-hls-video/main.ts
+++ b/apps/sandbox/templates/html-hls-video/main.ts
@@ -5,7 +5,7 @@ import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/san
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
-import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
 
@@ -13,16 +13,18 @@ const state = createHtmlSandboxState();
 const loadLatest = createLatestLoader();
 
 async function render() {
-  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling));
+  const live = isLiveSource(state.source);
+  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling, { live }));
   if (!tag) return;
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const liveAttrs = live ? 'autoplay muted' : '';
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <hls-video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
+        <hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
diff --git a/apps/sandbox/templates/html-mux-video/main.ts b/apps/sandbox/templates/html-mux-video/main.ts
index d1ead60a..b90b0cbc 100644
--- a/apps/sandbox/templates/html-mux-video/main.ts
+++ b/apps/sandbox/templates/html-mux-video/main.ts
@@ -5,7 +5,7 @@ import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/san
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
-import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
 
@@ -13,16 +13,18 @@ const state = createHtmlSandboxState();
 const loadLatest = createLatestLoader();
 
 async function render() {
-  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling));
+  const live = isLiveSource(state.source);
+  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling, { live }));
   if (!tag) return;
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const liveAttrs = live ? 'autoplay muted' : '';
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <mux-video src="${SOURCES[state.source].url}" debug playsinline crossorigin="anonymous">
+        <mux-video src="${SOURCES[state.source].url}" debug ${liveAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </mux-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
diff --git a/apps/sandbox/templates/html-native-hls-video/main.ts b/apps/sandbox/templates/html-native-hls-video/main.ts
index ae48fd39..e62da463 100644
--- a/apps/sandbox/templates/html-native-hls-video/main.ts
+++ b/apps/sandbox/templates/html-native-hls-video/main.ts
@@ -5,7 +5,7 @@ import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/san
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
-import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
 
@@ -13,16 +13,18 @@ const state = createHtmlSandboxState();
 const loadLatest = createLatestLoader();
 
 async function render() {
-  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling));
+  const live = isLiveSource(state.source);
+  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling, { live }));
   if (!tag) return;
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const liveAttrs = live ? 'autoplay muted' : '';
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="w-full aspect-video max-w-4xl mx-auto">
-        <native-hls-video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
+        <native-hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </native-hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
diff --git a/apps/sandbox/templates/html-simple-hls-video/main.ts b/apps/sandbox/templates/html-simple-hls-video/main.ts
index 823eac92..21c820aa 100644
--- a/apps/sandbox/templates/html-simple-hls-video/main.ts
+++ b/apps/sandbox/templates/html-simple-hls-video/main.ts
@@ -5,7 +5,7 @@ import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/san
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
-import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
+import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
 
@@ -13,16 +13,18 @@ const state = createHtmlSandboxState();
 const loadLatest = createLatestLoader();
 
 async function render() {
-  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling));
+  const live = isLiveSource(state.source);
+  const tag = await loadLatest(() => loadVideoSkinTag(state.skin, state.styling, { live }));
   if (!tag) return;
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const liveAttrs = live ? 'autoplay muted' : '';
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <simple-hls-video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
+        <simple-hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </simple-hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
diff --git a/apps/sandbox/templates/react-hls-video/main.tsx b/apps/sandbox/templates/react-hls-video/main.tsx
index 149cdbf0..97fbbf9d 100644
--- a/apps/sandbox/templates/react-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-hls-video/main.tsx
@@ -6,7 +6,7 @@ import { usePoster } from '@app/shared/react/use-poster';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
-import { SOURCES } from '@app/shared/sources';
+import { isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
 import { HlsVideo } from '@videojs/react/media/hls-video';
 import { useMemo } from 'react';
@@ -22,11 +22,18 @@ function App() {
   const styling = useMemo(readStyling, []);
   const poster = usePoster();
   const storyboard = useStoryboard();
+  const live = isLiveSource(source);
 
   return (
     <VideoProvider>
-      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
-        <HlsVideo src={SOURCES[source].url} playsInline crossOrigin="anonymous">
+      <VideoSkinComponent
+        poster={poster}
+        skin={skin}
+        styling={styling}
+        live={live}
+        className="aspect-video max-w-4xl mx-auto"
+      >
+        <HlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </HlsVideo>
       </VideoSkinComponent>
diff --git a/apps/sandbox/templates/react-mux-video/main.tsx b/apps/sandbox/templates/react-mux-video/main.tsx
index 945123f8..113e916c 100644
--- a/apps/sandbox/templates/react-mux-video/main.tsx
+++ b/apps/sandbox/templates/react-mux-video/main.tsx
@@ -6,7 +6,7 @@ import { usePoster } from '@app/shared/react/use-poster';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
-import { SOURCES } from '@app/shared/sources';
+import { isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
 import { MuxVideo } from '@videojs/react/media/mux-video';
 import { useMemo } from 'react';
@@ -22,11 +22,18 @@ function App() {
   const styling = useMemo(readStyling, []);
   const poster = usePoster();
   const storyboard = useStoryboard();
+  const live = isLiveSource(source);
 
   return (
     <VideoProvider>
-      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
-        <MuxVideo src={SOURCES[source].url} debug playsInline crossOrigin="anonymous">
+      <VideoSkinComponent
+        poster={poster}
+        skin={skin}
+        styling={styling}
+        live={live}
+        className="aspect-video max-w-4xl mx-auto"
+      >
+        <MuxVideo src={SOURCES[source].url} debug autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </MuxVideo>
       </VideoSkinComponent>
diff --git a/apps/sandbox/templates/react-native-hls-video/main.tsx b/apps/sandbox/templates/react-native-hls-video/main.tsx
index f1202a41..ad636fae 100644
--- a/apps/sandbox/templates/react-native-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-native-hls-video/main.tsx
@@ -6,7 +6,7 @@ import { usePoster } from '@app/shared/react/use-poster';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
-import { SOURCES } from '@app/shared/sources';
+import { isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
 import { NativeHlsVideo } from '@videojs/react/media/native-hls-video';
 import { useMemo } from 'react';
@@ -22,6 +22,7 @@ function App() {
   const styling = useMemo(readStyling, []);
   const poster = usePoster();
   const storyboard = useStoryboard();
+  const live = isLiveSource(source);
 
   return (
     <VideoProvider>
@@ -29,9 +30,10 @@ function App() {
         poster={poster}
         skin={skin}
         styling={styling}
+        live={live}
         className="w-full aspect-video max-w-4xl mx-auto"
       >
-        <NativeHlsVideo src={SOURCES[source].url} playsInline crossOrigin="anonymous">
+        <NativeHlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </NativeHlsVideo>
       </VideoSkinComponent>
diff --git a/apps/sandbox/templates/react-simple-hls-video/main.tsx b/apps/sandbox/templates/react-simple-hls-video/main.tsx
index 6fbfeffe..22bb332e 100644
--- a/apps/sandbox/templates/react-simple-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-simple-hls-video/main.tsx
@@ -6,7 +6,7 @@ import { usePoster } from '@app/shared/react/use-poster';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
-import { SOURCES } from '@app/shared/sources';
+import { isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Styling } from '@app/types';
 import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
 import { useMemo } from 'react';
@@ -22,11 +22,18 @@ function App() {
   const styling = useMemo(readStyling, []);
   const poster = usePoster();
   const storyboard = useStoryboard();
+  const live = isLiveSource(source);
 
   return (
     <VideoProvider>
-      <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
-        <SimpleHlsVideo src={SOURCES[source].url} playsInline crossOrigin="anonymous">
+      <VideoSkinComponent
+        poster={poster}
+        skin={skin}
+        styling={styling}
+        live={live}
+        className="aspect-video max-w-4xl mx-auto"
+      >
+        <SimpleHlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
           <Storyboard src={storyboard} />
         </SimpleHlsVideo>
       </VideoSkinComponent>
diff --git a/packages/core/src/dom/media/types.ts b/packages/core/src/dom/media/types.ts
index a8caebb7..6838fc2e 100644
--- a/packages/core/src/dom/media/types.ts
+++ b/packages/core/src/dom/media/types.ts
@@ -9,7 +9,6 @@ import type {
   MediaPlaybackState,
   MediaRemotePlaybackState,
   MediaSourceState,
-  MediaStreamTypeState,
   MediaTextTrackState,
   MediaTimeState,
   MediaVolumeState,
@@ -45,7 +44,6 @@ export type VideoFeatures = [
   PlayerFeature<MediaVolumeState>,
   PlayerFeature<MediaTimeState>,
   PlayerFeature<MediaSourceState>,
-  PlayerFeature<MediaStreamTypeState>,
   PlayerFeature<MediaBufferState>,
   PlayerFeature<MediaFullscreenState>,
   PlayerFeature<MediaPictureInPictureState>,
@@ -61,7 +59,6 @@ export type AudioFeatures = [
   PlayerFeature<MediaVolumeState>,
   PlayerFeature<MediaTimeState>,
   PlayerFeature<MediaSourceState>,
-  PlayerFeature<MediaStreamTypeState>,
   PlayerFeature<MediaBufferState>,
   PlayerFeature<MediaErrorState>,
 ];
@@ -70,17 +67,35 @@ export type AudioFeatures = [
 export type BackgroundFeatures = [];
 
 /**
- * Features for a live video player. Structurally identical to
- * {@link VideoFeatures} — the "live" presets share the same store but ship a
- * skin that omits duration-oriented UI.
+ * Features for a live video player. Mirrors {@link VideoFeatures} without the
+ * playback-rate feature, which isn't meaningful for live streams.
  */
-export type LiveVideoFeatures = VideoFeatures;
+export type LiveVideoFeatures = [
+  PlayerFeature<MediaPlaybackState>,
+  PlayerFeature<MediaVolumeState>,
+  PlayerFeature<MediaTimeState>,
+  PlayerFeature<MediaSourceState>,
+  PlayerFeature<MediaBufferState>,
+  PlayerFeature<MediaFullscreenState>,
+  PlayerFeature<MediaPictureInPictureState>,
+  PlayerFeature<MediaRemotePlaybackState>,
+  PlayerFeature<MediaControlsState>,
+  PlayerFeature<MediaTextTrackState>,
+  PlayerFeature<MediaErrorState>,
+];
 
 /**
- * Features for a live audio player. Structurally identical to
- * {@link AudioFeatures}.
+ * Features for a live audio player. Mirrors {@link AudioFeatures} without the
+ * playback-rate feature, which isn't meaningful for live streams.
  */
-export type LiveAudioFeatures = AudioFeatures;
+export type LiveAudioFeatures = [
+  PlayerFeature<MediaPlaybackState>,
+  PlayerFeature<MediaVolumeState>,
+  PlayerFeature<MediaTimeState>,
+  PlayerFeature<MediaSourceState>,
+  PlayerFeature<MediaBufferState>,
+  PlayerFeature<MediaErrorState>,
+];
 
 export type VideoPlayerStore = PlayerStore<VideoFeatures>;
 
diff --git a/packages/core/src/dom/store/features/presets.ts b/packages/core/src/dom/store/features/presets.ts
index fb4b4161..5b04fd5f 100644
--- a/packages/core/src/dom/store/features/presets.ts
+++ b/packages/core/src/dom/store/features/presets.ts
@@ -1,4 +1,10 @@
-import type { AudioFeatures, BackgroundFeatures, VideoFeatures } from '../../media/types';
+import type {
+  AudioFeatures,
+  BackgroundFeatures,
+  LiveAudioFeatures,
+  LiveVideoFeatures,
+  VideoFeatures,
+} from '../../media/types';
 import { bufferFeature } from './buffer';
 import { controlsFeature } from './controls';
 import { errorFeature } from './error';
@@ -8,7 +14,6 @@ import { playbackFeature } from './playback';
 import { playbackRateFeature } from './playback-rate';
 import { remotePlaybackFeature } from './remote-playback';
 import { sourceFeature } from './source';
-import { streamTypeFeature } from './stream-type';
 import { textTrackFeature } from './text-track';
 import { timeFeature } from './time';
 import { volumeFeature } from './volume';
@@ -19,7 +24,6 @@ export const videoFeatures: VideoFeatures = [
   volumeFeature,
   timeFeature,
   sourceFeature,
-  streamTypeFeature,
   bufferFeature,
   fullscreenFeature,
   pipFeature,
@@ -35,10 +39,40 @@ export const audioFeatures: AudioFeatures = [
   volumeFeature,
   timeFeature,
   sourceFeature,
-  streamTypeFeature,
   bufferFeature,
   errorFeature,
 ];
 
 // TODO: Add background video features (e.g., playback, source, buffer)
 export const backgroundFeatures: BackgroundFeatures = [];
+
+/**
+ * Features for a live video player. Mirrors {@link videoFeatures} without the
+ * playback-rate feature, which isn't meaningful for live streams.
+ */
+export const liveVideoFeatures: LiveVideoFeatures = [
+  playbackFeature,
+  volumeFeature,
+  timeFeature,
+  sourceFeature,
+  bufferFeature,
+  fullscreenFeature,
+  pipFeature,
+  remotePlaybackFeature,
+  controlsFeature,
+  textTrackFeature,
+  errorFeature,
+];
+
+/**
+ * Features for a live audio player. Mirrors {@link audioFeatures} without the
+ * playback-rate feature, which isn't meaningful for live streams.
+ */
+export const liveAudioFeatures: LiveAudioFeatures = [
+  playbackFeature,
+  volumeFeature,
+  timeFeature,
+  sourceFeature,
+  bufferFeature,
+  errorFeature,
+];
diff --git a/packages/html/package.json b/packages/html/package.json
index 19373e3f..87cb84e0 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -59,6 +59,28 @@
       "development": "./dist/dev/define/background/*.js",
       "default": "./dist/default/define/background/*.js"
     },
+    "./live-video": {
+      "types": "./dist/dev/presets/live-video.d.ts",
+      "development": "./dist/dev/presets/live-video.js",
+      "default": "./dist/default/presets/live-video.js"
+    },
+    "./live-video/*.css": "./dist/default/define/live-video/*.css",
+    "./live-video/*": {
+      "types": "./dist/dev/define/live-video/*.d.ts",
+      "development": "./dist/dev/define/live-video/*.js",
+      "default": "./dist/default/define/live-video/*.js"
+    },
+    "./live-audio": {
+      "types": "./dist/dev/presets/live-audio.d.ts",
+      "development": "./dist/dev/presets/live-audio.js",
+      "default": "./dist/default/presets/live-audio.js"
+    },
+    "./live-audio/*.css": "./dist/default/define/live-audio/*.css",
+    "./live-audio/*": {
+      "types": "./dist/dev/define/live-audio/*.d.ts",
+      "development": "./dist/dev/define/live-audio/*.js",
+      "default": "./dist/default/define/live-audio/*.js"
+    },
     "./ui/*": {
       "types": "./dist/dev/define/ui/*.d.ts",
       "development": "./dist/dev/define/ui/*.js",
diff --git a/packages/html/src/cdn/live-video-minimal.ts b/packages/html/src/cdn/live-video-minimal.ts
new file mode 100644
index 00000000..476f147c
--- /dev/null
+++ b/packages/html/src/cdn/live-video-minimal.ts
@@ -0,0 +1 @@
+import '../define/live-video/minimal-skin';
diff --git a/packages/html/src/cdn/live-video.ts b/packages/html/src/cdn/live-video.ts
new file mode 100644
index 00000000..a11c2bb3
--- /dev/null
+++ b/packages/html/src/cdn/live-video.ts
@@ -0,0 +1 @@
+import '../define/live-video/skin';
diff --git a/packages/html/src/define/live-audio/minimal-skin.css b/packages/html/src/define/live-audio/minimal-skin.css
new file mode 100644
index 00000000..c4239c54
--- /dev/null
+++ b/packages/html/src/define/live-audio/minimal-skin.css
@@ -0,0 +1,3 @@
+@import "../base.css";
+@import "../shared.css";
+@import "@videojs/skins/minimal/css/audio.css";
diff --git a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
new file mode 100644
index 00000000..f52b59e9
--- /dev/null
+++ b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
@@ -0,0 +1,86 @@
+import { renderIcon } from '@videojs/icons/render/minimal';
+import {
+  button,
+  buttonGroup,
+  controls,
+  error,
+  icon,
+  iconState,
+  popup,
+  root,
+  slider,
+} from '@videojs/skins/minimal/tailwind/audio.tailwind';
+import { createTemplate } from '@videojs/utils/dom';
+import { cn } from '@videojs/utils/style';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+
+// Reuse the audio preset's minimal UI element registrations.
+import '../audio/minimal-ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="${root}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-error-dialog class="${error.root}">
+        <div class="${error.dialog}">
+          <div class="${error.content}">
+            <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
+          </div>
+          <div class="${error.actions}">
+            <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <div class="${controls}">
+        <media-tooltip-group>
+          <div class="${buttonGroup}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+
+          <div class="grow" aria-hidden="true"></div>
+
+          <div class="${buttonGroup}">
+            <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
+
+            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="${cn(popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="horizontal" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
+      </div>
+    </media-container>
+  `;
+}
+
+export class MinimalLiveAudioSkinTailwindElement extends SkinElement {
+  static readonly tagName = 'live-audio-minimal-skin-tailwind';
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(MinimalLiveAudioSkinTailwindElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MinimalLiveAudioSkinTailwindElement.tagName]: MinimalLiveAudioSkinTailwindElement;
+  }
+}
diff --git a/packages/html/src/define/live-audio/minimal-skin.ts b/packages/html/src/define/live-audio/minimal-skin.ts
new file mode 100644
index 00000000..63f06788
--- /dev/null
+++ b/packages/html/src/define/live-audio/minimal-skin.ts
@@ -0,0 +1,76 @@
+import { renderIcon } from '@videojs/icons/render/minimal';
+import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+import styles from './minimal-skin.css?inline';
+
+// Reuse the audio preset's minimal UI element registrations.
+import '../audio/minimal-ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="media-minimal-skin media-minimal-skin--audio">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <div class="media-controls">
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
+          </div>
+
+          <div class="media-time-controls" aria-hidden="true"></div>
+
+          <div class="media-button-group">
+            <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
+
+            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="left" class="media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="horizontal" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
+      </div>
+    </media-container>
+  `;
+}
+
+export class MinimalLiveAudioSkinElement extends SkinElement {
+  static readonly tagName = 'live-audio-minimal-skin';
+  static styles = createShadowStyle(styles);
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(MinimalLiveAudioSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MinimalLiveAudioSkinElement.tagName]: MinimalLiveAudioSkinElement;
+  }
+}
diff --git a/packages/html/src/define/live-audio/skin.css b/packages/html/src/define/live-audio/skin.css
new file mode 100644
index 00000000..83ebd47b
--- /dev/null
+++ b/packages/html/src/define/live-audio/skin.css
@@ -0,0 +1,3 @@
+@import "../base.css";
+@import "../shared.css";
+@import "@videojs/skins/default/css/audio.css";
diff --git a/packages/html/src/define/live-audio/skin.tailwind.ts b/packages/html/src/define/live-audio/skin.tailwind.ts
new file mode 100644
index 00000000..a8456073
--- /dev/null
+++ b/packages/html/src/define/live-audio/skin.tailwind.ts
@@ -0,0 +1,86 @@
+import { renderIcon } from '@videojs/icons/render';
+import {
+  button,
+  buttonGroup,
+  controls,
+  error,
+  icon,
+  iconState,
+  popup,
+  root,
+  slider,
+} from '@videojs/skins/default/tailwind/audio.tailwind';
+import { createTemplate } from '@videojs/utils/dom';
+import { cn } from '@videojs/utils/style';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+
+// Reuse the audio preset's UI element registrations.
+import '../audio/ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="${root}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-error-dialog class="${error.root}">
+        <div class="${error.dialog}">
+          <div class="${error.content}">
+            <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
+          </div>
+          <div class="${error.actions}">
+            <media-alert-dialog-close class="${cn(button.base, button.subtle)}">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <div class="${controls}">
+        <media-tooltip-group>
+          <div class="${buttonGroup}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+
+          <div class="grow" aria-hidden="true"></div>
+
+          <div class="${buttonGroup}">
+            <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
+
+            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
+      </div>
+    </media-container>
+  `;
+}
+
+export class LiveAudioSkinTailwindElement extends SkinElement {
+  static readonly tagName = 'live-audio-skin-tailwind';
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(LiveAudioSkinTailwindElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveAudioSkinTailwindElement.tagName]: LiveAudioSkinTailwindElement;
+  }
+}
diff --git a/packages/html/src/define/live-audio/skin.ts b/packages/html/src/define/live-audio/skin.ts
new file mode 100644
index 00000000..ee0cee7a
--- /dev/null
+++ b/packages/html/src/define/live-audio/skin.ts
@@ -0,0 +1,83 @@
+import { renderIcon } from '@videojs/icons/render';
+import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+import styles from './skin.css?inline';
+
+// Reuse the audio preset's UI element registrations.
+import '../audio/ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="media-default-skin media-default-skin--audio">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--subtle">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <div class="media-surface media-controls">
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+          </div>
+
+          <div class="media-time-controls" aria-hidden="true"></div>
+
+          <div class="media-button-group">
+            <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
+
+            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+          </div>
+        </media-tooltip-group>
+      </div>
+
+      <!-- Hotkeys -->
+      <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
+      <media-hotkey keys="k" action="togglePaused"></media-hotkey>
+      <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
+      <media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey>
+      <media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey>
+    </media-container>
+  `;
+}
+
+export class LiveAudioSkinElement extends SkinElement {
+  static readonly tagName = 'live-audio-skin';
+  static styles = createShadowStyle(styles);
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(LiveAudioSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveAudioSkinElement.tagName]: LiveAudioSkinElement;
+  }
+}
diff --git a/packages/html/src/define/live-video/minimal-skin.css b/packages/html/src/define/live-video/minimal-skin.css
new file mode 100644
index 00000000..28f9f8da
--- /dev/null
+++ b/packages/html/src/define/live-video/minimal-skin.css
@@ -0,0 +1,3 @@
+@import "../base.css";
+@import "../shared.css";
+@import "@videojs/skins/minimal/css/video.css";
diff --git a/packages/html/src/define/live-video/minimal-skin.tailwind.ts b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
new file mode 100644
index 00000000..3634e38a
--- /dev/null
+++ b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
@@ -0,0 +1,120 @@
+import { renderIcon } from '@videojs/icons/render/minimal';
+import {
+  bufferingIndicator,
+  button,
+  buttonGroupEnd,
+  buttonGroupStart,
+  controls,
+  error,
+  icon,
+  iconState,
+  overlay,
+  popup,
+  poster,
+  root,
+  slider,
+} from '@videojs/skins/minimal/tailwind/video.tailwind';
+import { createTemplate } from '@videojs/utils/dom';
+import { cn } from '@videojs/utils/style';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+
+// Reuse the video preset's minimal UI element registrations.
+import '../video/minimal-ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="${root(true)}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster class="${poster(true)}">
+        <slot name="poster"></slot>
+      </media-poster>
+
+      <media-buffering-indicator class="${bufferingIndicator}">
+        ${renderIcon('spinner')}
+      </media-buffering-indicator>
+
+      <media-error-dialog class="${error.root}">
+        <div class="${error.dialog}">
+          <div class="${error.content}">
+            <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
+          </div>
+          <div class="${error.actions}">
+            <media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <media-controls data-controls="" class="${controls}">
+        <media-tooltip-group>
+          <div class="${buttonGroupStart}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+
+          <div class="grow" aria-hidden="true"></div>
+
+          <div class="${buttonGroupEnd}">
+            <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
+
+            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+              <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+              </media-captions-button>
+              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+              </media-cast-button>
+              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+              </media-pip-button>
+              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+              </media-fullscreen-button>
+              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+        </media-tooltip-group>
+      </media-controls>
+
+      <div class="${overlay}"></div>
+    </media-container>
+  `;
+}
+
+export class MinimalLiveVideoSkinTailwindElement extends SkinElement {
+  static readonly tagName = 'live-video-minimal-skin-tailwind';
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(MinimalLiveVideoSkinTailwindElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MinimalLiveVideoSkinTailwindElement.tagName]: MinimalLiveVideoSkinTailwindElement;
+  }
+}
diff --git a/packages/html/src/define/live-video/minimal-skin.ts b/packages/html/src/define/live-video/minimal-skin.ts
new file mode 100644
index 00000000..35e9e5f9
--- /dev/null
+++ b/packages/html/src/define/live-video/minimal-skin.ts
@@ -0,0 +1,112 @@
+import { renderIcon } from '@videojs/icons/render/minimal';
+import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+import styles from './minimal-skin.css?inline';
+
+// Reuse the video preset's minimal UI element registrations.
+import '../video/minimal-ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="media-minimal-skin media-minimal-skin--video">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster>
+        <slot name="poster"></slot>
+      </media-poster>
+
+      <media-buffering-indicator class="media-buffering-indicator">
+        ${renderIcon('spinner', { class: 'media-icon' })}
+      </media-buffering-indicator>
+
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <media-controls class="media-controls">
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
+          </div>
+
+          <div class="media-time-controls" aria-hidden="true"></div>
+
+          <div class="media-button-group">
+            <media-mute-button commandfor="live-video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
+
+            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
+              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
+              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="media-tooltip">
+              Toggle captions
+            </media-tooltip>
+
+            <media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
+              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
+              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="media-tooltip"></media-tooltip>
+
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
+              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
+              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="media-tooltip"></media-tooltip>
+
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
+              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
+              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="media-tooltip"></media-tooltip>
+          </div>
+        </media-tooltip-group>
+      </media-controls>
+
+      <div class="media-overlay"></div>
+    </media-container>
+  `;
+}
+
+export class MinimalLiveVideoSkinElement extends SkinElement {
+  static readonly tagName = 'live-video-minimal-skin';
+  static styles = createShadowStyle(styles);
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(MinimalLiveVideoSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MinimalLiveVideoSkinElement.tagName]: MinimalLiveVideoSkinElement;
+  }
+}
diff --git a/packages/html/src/define/live-video/skin.css b/packages/html/src/define/live-video/skin.css
new file mode 100644
index 00000000..15c9f8e0
--- /dev/null
+++ b/packages/html/src/define/live-video/skin.css
@@ -0,0 +1,3 @@
+@import "../base.css";
+@import "../shared.css";
+@import "@videojs/skins/default/css/video.css";
diff --git a/packages/html/src/define/live-video/skin.tailwind.ts b/packages/html/src/define/live-video/skin.tailwind.ts
new file mode 100644
index 00000000..32aec808
--- /dev/null
+++ b/packages/html/src/define/live-video/skin.tailwind.ts
@@ -0,0 +1,122 @@
+import { renderIcon } from '@videojs/icons/render';
+import {
+  bufferingIndicator,
+  button,
+  buttonGroupEnd,
+  buttonGroupStart,
+  controls,
+  error,
+  icon,
+  iconState,
+  overlay,
+  popup,
+  poster,
+  root,
+  slider,
+} from '@videojs/skins/default/tailwind/video.tailwind';
+import { createTemplate } from '@videojs/utils/dom';
+import { cn } from '@videojs/utils/style';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+
+// Reuse the video preset's UI element registrations.
+import '../video/ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="${root(true)}">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster class="${poster(true)}">
+        <slot name="poster"></slot>
+      </media-poster>
+
+      <media-buffering-indicator class="${bufferingIndicator.root}">
+        <div class="${bufferingIndicator.container}">
+          ${renderIcon('spinner')}
+        </div>
+      </media-buffering-indicator>
+
+      <media-error-dialog class="${error.root}">
+        <div class="${error.dialog}">
+          <div class="${error.content}">
+            <media-alert-dialog-title class="${error.title}">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="${error.description}"></media-alert-dialog-description>
+          </div>
+          <div class="${error.actions}">
+            <media-alert-dialog-close class="${cn(button.base, button.primary)}">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <media-controls data-controls="" class="${controls}">
+        <media-tooltip-group>
+          <div class="${buttonGroupStart}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+              </media-play-button>
+              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+
+          <div class="grow" aria-hidden="true"></div>
+
+          <div class="${buttonGroupEnd}">
+            <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
+              ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
+              ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
+              ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}
+            </media-mute-button>
+
+            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+              <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="${slider.track}">
+                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+              <media-captions-button commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+              </media-captions-button>
+              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+              </media-cast-button>
+              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+              </media-pip-button>
+              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+              </media-fullscreen-button>
+              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+          </div>
+        </media-tooltip-group>
+      </media-controls>
+
+      <div class="${overlay}"></div>
+    </media-container>
+  `;
+}
+
+export class LiveVideoSkinTailwindElement extends SkinElement {
+  static readonly tagName = 'live-video-skin-tailwind';
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(LiveVideoSkinTailwindElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveVideoSkinTailwindElement.tagName]: LiveVideoSkinTailwindElement;
+  }
+}
diff --git a/packages/html/src/define/live-video/skin.ts b/packages/html/src/define/live-video/skin.ts
new file mode 100644
index 00000000..d051dede
--- /dev/null
+++ b/packages/html/src/define/live-video/skin.ts
@@ -0,0 +1,128 @@
+import { renderIcon } from '@videojs/icons/render';
+import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { safeDefine } from '../safe-define';
+import { SkinElement } from '../skin-element';
+import styles from './skin.css?inline';
+
+// Reuse the video preset's UI element registrations (player, container,
+// controls, buttons, etc.) — the live variant only differs in its template.
+import '../video/ui';
+
+function getTemplateHTML() {
+  return /*html*/ `
+    <media-container class="media-default-skin media-default-skin--video">
+      <!-- @deprecated slot="media" is no longer required, use the default slot instead -->
+      <slot name="media"></slot>
+      <slot></slot>
+
+      <media-poster>
+        <slot name="poster"></slot>
+      </media-poster>
+
+      <media-buffering-indicator class="media-buffering-indicator">
+        <div class="media-surface">
+          ${renderIcon('spinner', { class: 'media-icon' })}
+        </div>
+      </media-buffering-indicator>
+
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog media-surface">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
+      <media-controls class="media-surface media-controls">
+        <media-tooltip-group>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
+              ${renderIcon('play', { class: 'media-icon media-icon--play' })}
+              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+          </div>
+
+          <div class="media-time-controls" aria-hidden="true"></div>
+
+          <div class="media-button-group">
+            <media-mute-button commandfor="live-video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
+              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
+              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}
+            </media-mute-button>
+
+            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
+              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}
+              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+
+            <media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
+              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
+              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
+              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
+              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
+              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}
+              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+          </div>
+        </media-tooltip-group>
+      </media-controls>
+
+      <div class="media-overlay"></div>
+
+      <!-- Hotkeys -->
+      <media-hotkey keys="Space" action="togglePaused"></media-hotkey>
+      <media-hotkey keys="k" action="togglePaused"></media-hotkey>
+      <media-hotkey keys="m" action="toggleMuted"></media-hotkey>
+      <media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
+      <media-hotkey keys="c" action="toggleSubtitles"></media-hotkey>
+      <media-hotkey keys="i" action="togglePictureInPicture"></media-hotkey>
+      <media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey>
+      <media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey>
+
+      <!-- Gestures -->
+      <media-gesture type="tap" action="togglePaused" pointer="mouse" region="center"></media-gesture>
+      <media-gesture type="tap" action="toggleControls" pointer="touch"></media-gesture>
+      <media-gesture type="doubletap" action="toggleFullscreen" region="center"></media-gesture>
+    </media-container>
+  `;
+}
+
+export class LiveVideoSkinElement extends SkinElement {
+  static readonly tagName = 'live-video-skin';
+  static styles = createShadowStyle(styles);
+  static template = createTemplate(getTemplateHTML());
+}
+
+safeDefine(LiveVideoSkinElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveVideoSkinElement.tagName]: LiveVideoSkinElement;
+  }
+}
diff --git a/packages/html/src/presets/live-audio.ts b/packages/html/src/presets/live-audio.ts
new file mode 100644
index 00000000..cc4673a8
--- /dev/null
+++ b/packages/html/src/presets/live-audio.ts
@@ -0,0 +1,6 @@
+/** Live audio player preset — same features as `audio` with a skin that omits duration / current-time displays. */
+export { liveAudioFeatures } from '@videojs/core/dom';
+export { MinimalLiveAudioSkinElement } from '../define/live-audio/minimal-skin';
+export { MinimalLiveAudioSkinTailwindElement } from '../define/live-audio/minimal-skin.tailwind';
+export { LiveAudioSkinElement } from '../define/live-audio/skin';
+export { LiveAudioSkinTailwindElement } from '../define/live-audio/skin.tailwind';
diff --git a/packages/html/src/presets/live-video.ts b/packages/html/src/presets/live-video.ts
new file mode 100644
index 00000000..2bd5fc46
--- /dev/null
+++ b/packages/html/src/presets/live-video.ts
@@ -0,0 +1,6 @@
+/** Live video player preset — same features as `video` with a skin that omits duration / current-time displays. */
+export { liveVideoFeatures } from '@videojs/core/dom';
+export { MinimalLiveVideoSkinElement } from '../define/live-video/minimal-skin';
+export { MinimalLiveVideoSkinTailwindElement } from '../define/live-video/minimal-skin.tailwind';
+export { LiveVideoSkinElement } from '../define/live-video/skin';
+export { LiveVideoSkinTailwindElement } from '../define/live-video/skin.tailwind';
diff --git a/packages/html/tsdown.cdn.config.ts b/packages/html/tsdown.cdn.config.ts
index eb7a1ce3..0494a531 100644
--- a/packages/html/tsdown.cdn.config.ts
+++ b/packages/html/tsdown.cdn.config.ts
@@ -17,6 +17,8 @@ const presets = [
   'video-minimal',
   'video-ui',
   'video-minimal-ui',
+  'live-video',
+  'live-video-minimal',
   'audio',
   'audio-minimal',
   'audio-ui',
diff --git a/packages/react/package.json b/packages/react/package.json
index 24cdc37e..ef4e4d3b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -59,6 +59,28 @@
       "types": "./dist/dev/presets/background/*.d.ts",
       "development": "./dist/dev/presets/background/*.js",
       "default": "./dist/default/presets/background/*.js"
+    },
+    "./live-video": {
+      "types": "./dist/dev/presets/live-video/index.d.ts",
+      "development": "./dist/dev/presets/live-video/index.js",
+      "default": "./dist/default/presets/live-video/index.js"
+    },
+    "./live-video/*.css": "./dist/default/presets/live-video/*.css",
+    "./live-video/*": {
+      "types": "./dist/dev/presets/live-video/*.d.ts",
+      "development": "./dist/dev/presets/live-video/*.js",
+      "default": "./dist/default/presets/live-video/*.js"
+    },
+    "./live-audio": {
+      "types": "./dist/dev/presets/live-audio/index.d.ts",
+      "development": "./dist/dev/presets/live-audio/index.js",
+      "default": "./dist/default/presets/live-audio/index.js"
+    },
+    "./live-audio/*.css": "./dist/default/presets/live-audio/*.css",
+    "./live-audio/*": {
+      "types": "./dist/dev/presets/live-audio/*.d.ts",
+      "development": "./dist/dev/presets/live-audio/*.js",
+      "default": "./dist/default/presets/live-audio/*.js"
     }
   },
   "scripts": {
diff --git a/packages/react/src/presets/live-audio/index.ts b/packages/react/src/presets/live-audio/index.ts
new file mode 100644
index 00000000..03c81b66
--- /dev/null
+++ b/packages/react/src/presets/live-audio/index.ts
@@ -0,0 +1,7 @@
+/** Live audio player preset — same features as `audio` with a skin that omits duration / current-time displays. */
+export { liveAudioFeatures } from '@videojs/core/dom';
+export { Audio, type AudioProps } from '@/media/audio';
+export * from './minimal-skin';
+export * from './minimal-skin.tailwind';
+export * from './skin';
+export * from './skin.tailwind';
diff --git a/packages/react/src/presets/live-audio/minimal-skin.css b/packages/react/src/presets/live-audio/minimal-skin.css
new file mode 100644
index 00000000..f7064f30
--- /dev/null
+++ b/packages/react/src/presets/live-audio/minimal-skin.css
@@ -0,0 +1 @@
+@import "@videojs/skins/minimal/css/audio.css";
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
new file mode 100644
index 00000000..ad65a1df
--- /dev/null
+++ b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
@@ -0,0 +1,149 @@
+import {
+  PauseIcon,
+  PlayIcon,
+  RestartIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react/minimal';
+import {
+  button,
+  buttonGroup,
+  controls,
+  error,
+  icon,
+  iconState,
+  popup,
+  root,
+  slider,
+} from '@videojs/skins/minimal/tailwind/audio.tailwind';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { MuteButton } from '@/ui/mute-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import type { MinimalLiveAudioSkinProps } from './minimal-skin';
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
+  );
+});
+
+const SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {
+  return <div ref={ref} className={cn(slider.root, className)} {...props} />;
+});
+
+const SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(
+  { className, ...props },
+  ref
+) {
+  return <div ref={ref} className={cn(slider.track, className)} {...props} />;
+});
+
+const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(
+  { type = 'fill', className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      {...props}
+    />
+  );
+});
+
+const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(
+  { persistent, className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className={iconState.mute.button} render={<Button />}>
+      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className={cn(popup.volume)}>
+        <VolumeSlider.Root orientation="horizontal" thumbAlignment="edge" render={<SliderRoot />}>
+          <VolumeSlider.Track render={<SliderTrack />}>
+            <VolumeSlider.Fill render={<SliderFill />} />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps): ReactNode {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Container className={cn(root, className)} {...rest}>
+      {children}
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className={error.root}>
+          <div className={error.dialog}>
+            <div className={error.content}>
+              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className={error.description} />
+            </div>
+            <div className={error.actions}>
+              <ErrorDialog.Close className={cn(button.base, button.subtle)}>OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <div className={controls}>
+        <Tooltip.Provider>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className={iconState.play.button} render={<Button />}>
+                    <RestartIcon className={cn(icon, iconState.play.restart)} />
+                    <PlayIcon className={cn(icon, iconState.play.play)} />
+                    <PauseIcon className={cn(icon, iconState.play.pause)} />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+
+          <div className="grow" aria-hidden="true" />
+
+          <div className={buttonGroup}>
+            <VolumePopover />
+          </div>
+        </Tooltip.Provider>
+      </div>
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tsx b/packages/react/src/presets/live-audio/minimal-skin.tsx
new file mode 100644
index 00000000..aa9ed7eb
--- /dev/null
+++ b/packages/react/src/presets/live-audio/minimal-skin.tsx
@@ -0,0 +1,115 @@
+import {
+  PauseIcon,
+  PlayIcon,
+  RestartIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react/minimal';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { MuteButton } from '@/ui/mute-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import type { BaseSkinProps } from '../types';
+
+export type MinimalLiveAudioSkinProps = BaseSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className="media-button--mute" render={<Button />}>
+      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="left">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className="media-popover media-popover--volume">
+        <VolumeSlider.Root className="media-slider" orientation="horizontal" thumbAlignment="edge">
+          <VolumeSlider.Track className="media-slider__track">
+            <VolumeSlider.Fill className="media-slider__fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Minimal audio skin configured for live playback. Mirrors
+ * {@link MinimalAudioSkin} but omits the time slider and the current /
+ * duration / remaining time displays. A flexible spacer stretches between
+ * the play and volume controls so they sit at opposite edges of the
+ * control bar.
+ */
+export function MinimalLiveAudioSkin(props: MinimalLiveAudioSkinProps): ReactNode {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Container className={cn('media-minimal-skin media-minimal-skin--audio', className)} {...rest}>
+      {children}
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className="media-error">
+          <div className="media-error__dialog">
+            <div className="media-error__content">
+              <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className="media-error__description" />
+            </div>
+            <div className="media-error__actions">
+              <ErrorDialog.Close className="media-button media-button--subtle">OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <div className="media-controls">
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className="media-button--play" render={<Button />}>
+                    <RestartIcon className="media-icon media-icon--restart" />
+                    <PlayIcon className="media-icon media-icon--play" />
+                    <PauseIcon className="media-icon media-icon--pause" />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+          </div>
+
+          <div className="media-time-controls" aria-hidden="true" />
+
+          <div className="media-button-group">
+            <VolumePopover />
+          </div>
+        </Tooltip.Provider>
+      </div>
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-audio/skin.css b/packages/react/src/presets/live-audio/skin.css
new file mode 100644
index 00000000..d02eea76
--- /dev/null
+++ b/packages/react/src/presets/live-audio/skin.css
@@ -0,0 +1 @@
+@import "@videojs/skins/default/css/audio.css";
diff --git a/packages/react/src/presets/live-audio/skin.tailwind.tsx b/packages/react/src/presets/live-audio/skin.tailwind.tsx
new file mode 100644
index 00000000..710a3165
--- /dev/null
+++ b/packages/react/src/presets/live-audio/skin.tailwind.tsx
@@ -0,0 +1,142 @@
+import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/icons/react';
+import {
+  button,
+  buttonGroup,
+  controls,
+  error,
+  icon,
+  iconState,
+  popup,
+  root,
+  slider,
+} from '@videojs/skins/default/tailwind/audio.tailwind';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { MuteButton } from '@/ui/mute-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import type { LiveAudioSkinProps } from './skin';
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
+  );
+});
+
+const SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {
+  return <div ref={ref} className={cn(slider.root, className)} {...props} />;
+});
+
+const SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(
+  { className, ...props },
+  ref
+) {
+  return <div ref={ref} className={cn(slider.track, className)} {...props} />;
+});
+
+const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(
+  { type = 'fill', className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      {...props}
+    />
+  );
+});
+
+const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(
+  { persistent, className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className={iconState.mute.button} render={<Button />}>
+      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className={cn(popup.popover, popup.volume)}>
+        <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
+          <VolumeSlider.Track render={<SliderTrack />}>
+            <VolumeSlider.Fill render={<SliderFill />} />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Container className={cn(root, className)} {...rest}>
+      {children}
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className={error.root}>
+          <div className={error.dialog}>
+            <div className={error.content}>
+              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className={error.description} />
+            </div>
+            <div className={error.actions}>
+              <ErrorDialog.Close className={cn(button.base, button.subtle)}>OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <div className={controls}>
+        <Tooltip.Provider>
+          <div className={buttonGroup}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className={iconState.play.button} render={<Button />}>
+                    <RestartIcon className={cn(icon, iconState.play.restart)} />
+                    <PlayIcon className={cn(icon, iconState.play.play)} />
+                    <PauseIcon className={cn(icon, iconState.play.pause)} />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+
+          <div className="grow" aria-hidden="true" />
+
+          <div className={buttonGroup}>
+            <VolumePopover />
+          </div>
+        </Tooltip.Provider>
+      </div>
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-audio/skin.tsx b/packages/react/src/presets/live-audio/skin.tsx
new file mode 100644
index 00000000..8d3fcf01
--- /dev/null
+++ b/packages/react/src/presets/live-audio/skin.tsx
@@ -0,0 +1,115 @@
+import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/icons/react';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { Hotkey } from '@/ui/hotkey/hotkey';
+import { MuteButton } from '@/ui/mute-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import type { BaseSkinProps } from '../types';
+
+export type LiveAudioSkinProps = BaseSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className="media-button--mute" render={<Button />}>
+      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className="media-surface media-popover media-popover--volume">
+        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+          <VolumeSlider.Track className="media-slider__track">
+            <VolumeSlider.Fill className="media-slider__fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Default audio skin configured for live playback. Mirrors {@link AudioSkin}
+ * but omits the time slider and the current / duration time displays. A
+ * flexible spacer stretches between the play and volume controls so they
+ * sit at opposite edges of the control bar.
+ */
+export function LiveAudioSkin(props: LiveAudioSkinProps): ReactNode {
+  const { children, className, ...rest } = props;
+
+  return (
+    <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>
+      {children}
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className="media-error">
+          <div className="media-error__dialog">
+            <div className="media-error__content">
+              <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className="media-error__description" />
+            </div>
+            <div className="media-error__actions">
+              <ErrorDialog.Close className="media-button media-button--subtle">OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <div className="media-surface media-controls">
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className="media-button--play" render={<Button />}>
+                    <RestartIcon className="media-icon media-icon--restart" />
+                    <PlayIcon className="media-icon media-icon--play" />
+                    <PauseIcon className="media-icon media-icon--pause" />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+          </div>
+
+          <div className="media-time-controls" aria-hidden="true" />
+
+          <div className="media-button-group">
+            <VolumePopover />
+          </div>
+        </Tooltip.Provider>
+      </div>
+
+      {/* Hotkeys */}
+      <Hotkey keys="Space" action="togglePaused" />
+      <Hotkey keys="k" action="togglePaused" />
+      <Hotkey keys="m" action="toggleMuted" />
+      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-video/index.ts b/packages/react/src/presets/live-video/index.ts
new file mode 100644
index 00000000..d145a2bf
--- /dev/null
+++ b/packages/react/src/presets/live-video/index.ts
@@ -0,0 +1,7 @@
+/** Live video player preset — same features as `video` with a skin that omits duration / current-time displays. */
+export { liveVideoFeatures } from '@videojs/core/dom';
+export { Video, type VideoProps } from '@/media/video';
+export * from './minimal-skin';
+export * from './minimal-skin.tailwind';
+export * from './skin';
+export * from './skin.tailwind';
diff --git a/packages/react/src/presets/live-video/minimal-skin.css b/packages/react/src/presets/live-video/minimal-skin.css
new file mode 100644
index 00000000..383ec1eb
--- /dev/null
+++ b/packages/react/src/presets/live-video/minimal-skin.css
@@ -0,0 +1 @@
+@import "@videojs/skins/minimal/css/video.css";
diff --git a/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
new file mode 100644
index 00000000..8f14d516
--- /dev/null
+++ b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
@@ -0,0 +1,240 @@
+import {
+  CaptionsOffIcon,
+  CaptionsOnIcon,
+  CastEnterIcon,
+  CastExitIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PipEnterIcon,
+  PipExitIcon,
+  PlayIcon,
+  RestartIcon,
+  SpinnerIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react/minimal';
+import {
+  bufferingIndicator,
+  button,
+  buttonGroupEnd,
+  buttonGroupStart,
+  controls,
+  error,
+  icon,
+  iconState,
+  overlay,
+  popup,
+  poster,
+  root,
+  slider,
+} from '@videojs/skins/minimal/tailwind/video.tailwind';
+import { isString } from '@videojs/utils/predicate';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { BufferingIndicator } from '@/ui/buffering-indicator';
+import { CaptionsButton } from '@/ui/captions-button';
+import { CastButton } from '@/ui/cast-button';
+import { Controls } from '@/ui/controls';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { FullscreenButton } from '@/ui/fullscreen-button';
+import { MuteButton } from '@/ui/mute-button';
+import { PiPButton } from '@/ui/pip-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Poster } from '@/ui/poster';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import { isRenderProp } from '@/utils/use-render';
+import type { MinimalLiveVideoSkinProps } from './minimal-skin';
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
+  );
+});
+
+const SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {
+  return <div ref={ref} className={cn(slider.root, className)} {...props} />;
+});
+
+const SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(
+  { className, ...props },
+  ref
+) {
+  return <div ref={ref} className={cn(slider.track, className)} {...props} />;
+});
+
+const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(
+  { type = 'fill', className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      {...props}
+    />
+  );
+});
+
+const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(
+  { persistent, className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className={iconState.mute.button} render={<Button />}>
+      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className={cn(popup.volume)}>
+        <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
+          <VolumeSlider.Track render={<SliderTrack />}>
+            <VolumeSlider.Fill render={<SliderFill />} />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps): ReactNode {
+  const { children, className, poster: posterProp, ...rest } = props;
+
+  return (
+    <Container className={cn(root(false), className)} {...rest}>
+      {children}
+
+      {posterProp && (
+        <Poster
+          src={isString(posterProp) ? posterProp : undefined}
+          render={isRenderProp(posterProp) ? posterProp : undefined}
+          className={poster(false)}
+        />
+      )}
+
+      <BufferingIndicator
+        render={(props) => (
+          <div {...props} className={bufferingIndicator}>
+            <SpinnerIcon className={icon} />
+          </div>
+        )}
+      />
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className={error.root}>
+          <div className={error.dialog}>
+            <div className={error.content}>
+              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className={error.description} />
+            </div>
+            <div className={error.actions}>
+              <ErrorDialog.Close className={cn(button.base, button.primary)}>OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <Controls.Root
+        data-controls="" // Used as a hook for Tailwind has-[] styles
+        className={controls}
+      >
+        <Tooltip.Provider>
+          <div className={buttonGroupStart}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className={iconState.play.button} render={<Button />}>
+                    <RestartIcon className={cn(icon, iconState.play.restart)} />
+                    <PlayIcon className={cn(icon, iconState.play.play)} />
+                    <PauseIcon className={cn(icon, iconState.play.pause)} />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+
+          <div className="grow" aria-hidden="true" />
+
+          <div className={buttonGroupEnd}>
+            <VolumePopover />
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton className={iconState.captions.button} render={<Button />}>
+                    <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
+                    <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
+                  </CaptionsButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CastButton className={iconState.cast.button} render={<Button />}>
+                    <CastEnterIcon className={cn(icon, iconState.cast.enter)} />
+                    <CastExitIcon className={cn(icon, iconState.cast.exit)} />
+                  </CastButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton className={iconState.pip.button} render={<Button />}>
+                    <PipEnterIcon className={cn(icon, iconState.pip.off)} />
+                    <PipExitIcon className={cn(icon, iconState.pip.on)} />
+                  </PiPButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
+                    <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
+                    <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
+                  </FullscreenButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+      </Controls.Root>
+
+      <div className={overlay} />
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-video/minimal-skin.tsx b/packages/react/src/presets/live-video/minimal-skin.tsx
new file mode 100644
index 00000000..c1bfc740
--- /dev/null
+++ b/packages/react/src/presets/live-video/minimal-skin.tsx
@@ -0,0 +1,195 @@
+import {
+  CaptionsOffIcon,
+  CaptionsOnIcon,
+  CastEnterIcon,
+  CastExitIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PipEnterIcon,
+  PipExitIcon,
+  PlayIcon,
+  RestartIcon,
+  SpinnerIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react/minimal';
+import { isString } from '@videojs/utils/predicate';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { BufferingIndicator } from '@/ui/buffering-indicator';
+import { CaptionsButton } from '@/ui/captions-button';
+import { CastButton } from '@/ui/cast-button';
+import { Controls } from '@/ui/controls';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { FullscreenButton } from '@/ui/fullscreen-button';
+import { MuteButton } from '@/ui/mute-button';
+import { PiPButton } from '@/ui/pip-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Poster } from '@/ui/poster';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import { isRenderProp } from '@/utils/use-render';
+import type { BaseVideoSkinProps } from '../types';
+
+export type MinimalLiveVideoSkinProps = BaseVideoSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className="media-button--mute" render={<Button />}>
+      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className="media-popover media-popover--volume">
+        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+          <VolumeSlider.Track className="media-slider__track">
+            <VolumeSlider.Fill className="media-slider__fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Minimal video skin configured for live playback. Mirrors
+ * {@link MinimalVideoSkin} but omits the time slider and the current /
+ * duration / remaining time displays. A flexible spacer stretches between
+ * the start and end button groups so they sit at opposite edges of the
+ * control bar.
+ */
+export function MinimalLiveVideoSkin(props: MinimalLiveVideoSkinProps): ReactNode {
+  const { children, className, poster, ...rest } = props;
+
+  return (
+    <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>
+      {children}
+
+      {poster && (
+        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
+      )}
+
+      <BufferingIndicator
+        render={(props) => (
+          <div {...props} className="media-buffering-indicator">
+            <SpinnerIcon className="media-icon" />
+          </div>
+        )}
+      />
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className="media-error">
+          <div className="media-error__dialog">
+            <div className="media-error__content">
+              <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className="media-error__description" />
+            </div>
+            <div className="media-error__actions">
+              <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <Controls.Root className="media-controls">
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className="media-button--play" render={<Button />}>
+                    <RestartIcon className="media-icon media-icon--restart" />
+                    <PlayIcon className="media-icon media-icon--play" />
+                    <PauseIcon className="media-icon media-icon--pause" />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+          </div>
+
+          <div className="media-time-controls" aria-hidden="true" />
+
+          <div className="media-button-group">
+            <VolumePopover />
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton className="media-button--captions" render={<Button />}>
+                    <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+                    <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+                  </CaptionsButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CastButton className="media-button--cast" render={<Button />}>
+                    <CastEnterIcon className="media-icon media-icon--cast-enter" />
+                    <CastExitIcon className="media-icon media-icon--cast-exit" />
+                  </CastButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton className="media-button--pip" render={<Button />}>
+                    <PipEnterIcon className="media-icon media-icon--pip-enter" />
+                    <PipExitIcon className="media-icon media-icon--pip-exit" />
+                  </PiPButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton className="media-button--fullscreen" render={<Button />}>
+                    <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+                    <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+                  </FullscreenButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip" />
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+      </Controls.Root>
+
+      <div className="media-overlay" />
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-video/skin.css b/packages/react/src/presets/live-video/skin.css
new file mode 100644
index 00000000..14b25f0f
--- /dev/null
+++ b/packages/react/src/presets/live-video/skin.css
@@ -0,0 +1 @@
+@import "@videojs/skins/default/css/video.css";
diff --git a/packages/react/src/presets/live-video/skin.tailwind.tsx b/packages/react/src/presets/live-video/skin.tailwind.tsx
new file mode 100644
index 00000000..9bd340cf
--- /dev/null
+++ b/packages/react/src/presets/live-video/skin.tailwind.tsx
@@ -0,0 +1,242 @@
+import {
+  CaptionsOffIcon,
+  CaptionsOnIcon,
+  CastEnterIcon,
+  CastExitIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PipEnterIcon,
+  PipExitIcon,
+  PlayIcon,
+  RestartIcon,
+  SpinnerIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react';
+import {
+  bufferingIndicator,
+  button,
+  buttonGroupEnd,
+  buttonGroupStart,
+  controls,
+  error,
+  icon,
+  iconState,
+  overlay,
+  popup,
+  poster,
+  root,
+  slider,
+} from '@videojs/skins/default/tailwind/video.tailwind';
+import { isString } from '@videojs/utils/predicate';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { BufferingIndicator } from '@/ui/buffering-indicator';
+import { CaptionsButton } from '@/ui/captions-button';
+import { CastButton } from '@/ui/cast-button';
+import { Controls } from '@/ui/controls';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { FullscreenButton } from '@/ui/fullscreen-button';
+import { MuteButton } from '@/ui/mute-button';
+import { PiPButton } from '@/ui/pip-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Poster } from '@/ui/poster';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import { isRenderProp } from '@/utils/use-render';
+import type { LiveVideoSkinProps } from './skin';
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
+  );
+});
+
+const SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {
+  return <div ref={ref} className={cn(slider.root, className)} {...props} />;
+});
+
+const SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(
+  { className, ...props },
+  ref
+) {
+  return <div ref={ref} className={cn(slider.track, className)} {...props} />;
+});
+
+const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(
+  { type = 'fill', className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      {...props}
+    />
+  );
+});
+
+const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(
+  { persistent, className, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className={iconState.mute.button} render={<Button />}>
+      <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />
+      <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />
+      <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className={cn(popup.popover, popup.volume)}>
+        <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
+          <VolumeSlider.Track render={<SliderTrack />}>
+            <VolumeSlider.Fill render={<SliderFill />} />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
+  const { children, className, poster: posterProp, ...rest } = props;
+
+  return (
+    <Container className={cn(root(false), className)} {...rest}>
+      {children}
+
+      {posterProp && (
+        <Poster
+          src={isString(posterProp) ? posterProp : undefined}
+          render={isRenderProp(posterProp) ? posterProp : undefined}
+          className={poster(false)}
+        />
+      )}
+
+      <BufferingIndicator
+        render={(props) => (
+          <div {...props} className={bufferingIndicator.root}>
+            <div className={bufferingIndicator.container}>
+              <SpinnerIcon className={icon} />
+            </div>
+          </div>
+        )}
+      />
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className={error.root}>
+          <div className={error.dialog}>
+            <div className={error.content}>
+              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className={error.description} />
+            </div>
+            <div className={error.actions}>
+              <ErrorDialog.Close className={cn(button.base, button.primary)}>OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <Controls.Root
+        data-controls="" // Used as a hook for Tailwind has-[] styles
+        className={controls}
+      >
+        <Tooltip.Provider>
+          <div className={buttonGroupStart}>
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className={iconState.play.button} render={<Button />}>
+                    <RestartIcon className={cn(icon, iconState.play.restart)} />
+                    <PlayIcon className={cn(icon, iconState.play.play)} />
+                    <PauseIcon className={cn(icon, iconState.play.pause)} />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+
+          <div className="grow" aria-hidden="true" />
+
+          <div className={buttonGroupEnd}>
+            <VolumePopover />
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton className={iconState.captions.button} render={<Button />}>
+                    <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />
+                    <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />
+                  </CaptionsButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CastButton className={iconState.cast.button} render={<Button />}>
+                    <CastEnterIcon className={cn(icon, iconState.cast.enter)} />
+                    <CastExitIcon className={cn(icon, iconState.cast.exit)} />
+                  </CastButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton className={iconState.pip.button} render={<Button />}>
+                    <PipEnterIcon className={cn(icon, iconState.pip.off)} />
+                    <PipExitIcon className={cn(icon, iconState.pip.on)} />
+                  </PiPButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton className={iconState.fullscreen.button} render={<Button />}>
+                    <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />
+                    <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />
+                  </FullscreenButton>
+                }
+              />
+              <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+      </Controls.Root>
+
+      <div className={overlay} />
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/live-video/skin.tsx b/packages/react/src/presets/live-video/skin.tsx
new file mode 100644
index 00000000..750fae87
--- /dev/null
+++ b/packages/react/src/presets/live-video/skin.tsx
@@ -0,0 +1,213 @@
+import {
+  CaptionsOffIcon,
+  CaptionsOnIcon,
+  CastEnterIcon,
+  CastExitIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PipEnterIcon,
+  PipExitIcon,
+  PlayIcon,
+  RestartIcon,
+  SpinnerIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@videojs/icons/react';
+import { isString } from '@videojs/utils/predicate';
+import { cn } from '@videojs/utils/style';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
+import { Container, usePlayer } from '@/player/context';
+import { BufferingIndicator } from '@/ui/buffering-indicator';
+import { CaptionsButton } from '@/ui/captions-button';
+import { CastButton } from '@/ui/cast-button';
+import { Controls } from '@/ui/controls';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { FullscreenButton } from '@/ui/fullscreen-button';
+import { Gesture } from '@/ui/gesture/gesture';
+import { Hotkey } from '@/ui/hotkey/hotkey';
+import { MuteButton } from '@/ui/mute-button';
+import { PiPButton } from '@/ui/pip-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Poster } from '@/ui/poster';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeSlider } from '@/ui/volume-slider';
+import { isRenderProp } from '@/utils/use-render';
+import type { BaseVideoSkinProps } from '../types';
+
+export type LiveVideoSkinProps = BaseVideoSkinProps;
+
+const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn('media-button media-button--subtle media-button--icon', className)}
+      {...props}
+    />
+  );
+});
+
+function VolumePopover(): ReactNode {
+  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
+
+  const muteButton = (
+    <MuteButton className="media-button--mute" render={<Button />}>
+      <VolumeOffIcon className="media-icon media-icon--volume-off" />
+      <VolumeLowIcon className="media-icon media-icon--volume-low" />
+      <VolumeHighIcon className="media-icon media-icon--volume-high" />
+    </MuteButton>
+  );
+
+  if (volumeUnsupported) return muteButton;
+
+  return (
+    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+      <Popover.Trigger render={muteButton} />
+      <Popover.Popup className="media-surface media-popover media-popover--volume">
+        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
+          <VolumeSlider.Track className="media-slider__track">
+            <VolumeSlider.Fill className="media-slider__fill" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
+        </VolumeSlider.Root>
+      </Popover.Popup>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Default video skin configured for live playback. Mirrors {@link VideoSkin}
+ * but omits the time slider and the duration / current-time displays. A
+ * flexible spacer stretches between the start and end button groups so they
+ * sit at opposite edges of the control bar.
+ */
+export function LiveVideoSkin(props: LiveVideoSkinProps): ReactNode {
+  const { children, className, poster, ...rest } = props;
+
+  return (
+    <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>
+      {children}
+
+      {poster && (
+        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
+      )}
+
+      <BufferingIndicator
+        render={(props) => (
+          <div {...props} className="media-buffering-indicator">
+            <div className="media-surface">
+              <SpinnerIcon className="media-icon" />
+            </div>
+          </div>
+        )}
+      />
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className="media-error">
+          <div className="media-error__dialog media-surface">
+            <div className="media-error__content">
+              <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
+              <ErrorDialog.Description className="media-error__description" />
+            </div>
+            <div className="media-error__actions">
+              <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
+            </div>
+          </div>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <Controls.Root className="media-surface media-controls">
+        <Tooltip.Provider>
+          <div className="media-button-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className="media-button--play" render={<Button />}>
+                    <RestartIcon className="media-icon media-icon--restart" />
+                    <PlayIcon className="media-icon media-icon--play" />
+                    <PauseIcon className="media-icon media-icon--pause" />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+          </div>
+
+          <div className="media-time-controls" aria-hidden="true" />
+
+          <div className="media-button-group">
+            <VolumePopover />
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CaptionsButton className="media-button--captions" render={<Button />}>
+                    <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+                    <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+                  </CaptionsButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CastButton className="media-button--cast" render={<Button />}>
+                    <CastEnterIcon className="media-icon media-icon--cast-enter" />
+                    <CastExitIcon className="media-icon media-icon--cast-exit" />
+                  </CastButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton className="media-button--pip" render={<Button />}>
+                    <PipEnterIcon className="media-icon media-icon--pip-enter" />
+                    <PipExitIcon className="media-icon media-icon--pip-exit" />
+                  </PiPButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton className="media-button--fullscreen" render={<Button />}>
+                    <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
+                    <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
+                  </FullscreenButton>
+                }
+              />
+              <Tooltip.Popup className="media-surface media-tooltip" />
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+      </Controls.Root>
+
+      <div className="media-overlay" />
+
+      {/* Hotkeys */}
+      <Hotkey keys="Space" action="togglePaused" />
+      <Hotkey keys="k" action="togglePaused" />
+      <Hotkey keys="m" action="toggleMuted" />
+      <Hotkey keys="f" action="toggleFullscreen" />
+      <Hotkey keys="c" action="toggleSubtitles" />
+      <Hotkey keys="i" action="togglePictureInPicture" />
+      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+
+      {/* Gestures */}
+      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+      <Gesture type="tap" action="toggleControls" pointer="touch" />
+      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
+    </Container>
+  );
+}