videojs · cjpillsbury · Mar 10, 2026 · Mar 10, 2026
diff --git a/packages/sandbox/templates/constants.ts b/packages/sandbox/templates/constants.ts
@@ -1,4 +1,4 @@
 export const SKINS = ['default', 'minimal'] as const;
 export const PLATFORMS = ['html', 'react'] as const;
 export const STYLINGS = ['css', 'tailwind'] as const;
-export const PRESETS = ['video', 'hls-video', 'audio', 'background-video'] as const;
+export const PRESETS = ['video', 'hls-video', 'simple-hls-video', 'audio', 'background-video'] as const;
diff --git a/packages/sandbox/templates/html-simple-hls-video/index.html b/packages/sandbox/templates/html-simple-hls-video/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — HTML Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/packages/sandbox/templates/html-simple-hls-video/main.ts b/packages/sandbox/templates/html-simple-hls-video/main.ts
@@ -0,0 +1,41 @@
+import '@videojs/html/video/player';
+import '@videojs/html/media/simple-hls-video';
+import '@videojs/html/video/skin';
+import '@videojs/html/video/minimal-skin';
+import { CSS_SKIN_TAGS } from '../shared/html/skin-tags';
+import { loadVideoStylesheets } from '../shared/html/stylesheets';
+import { getInitialSkin, getInitialSource, onSkinChange, onSourceChange } from '../shared/sandbox-listener';
+import type { SourceId } from '../shared/sources';
+import { SOURCES } from '../shared/sources';
+import type { Skin } from '../types';
+
+const html = String.raw;
+
+let currentSkin: Skin = getInitialSkin();
+let currentSource: SourceId = getInitialSource();
+
+function render() {
+  const tag = CSS_SKIN_TAGS[currentSkin].video;
+
+  loadVideoStylesheets(currentSkin);
+
+  document.getElementById('root')!.innerHTML = html`
+    <video-player class="contents">
+      <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+        <simple-hls-video slot="media" src="${SOURCES[currentSource].url}"></simple-hls-video>
+      </${tag}>
+    </video-player>
+  `;
+}
+
+render();
+
+onSkinChange((skin) => {
+  currentSkin = skin;
+  render();
+});
+
+onSourceChange((source) => {
+  currentSource = source;
+  render();
+});
diff --git a/packages/sandbox/templates/react-simple-hls-video/index.html b/packages/sandbox/templates/react-simple-hls-video/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandbox — React Video</title>
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+  <body class="font-sans">
+    <div id="root" class="flex justify-center items-center min-h-screen"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/sandbox/templates/react-simple-hls-video/main.tsx b/packages/sandbox/templates/react-simple-hls-video/main.tsx
@@ -0,0 +1,24 @@
+import '@videojs/react/video/skin.css';
+import '@videojs/react/video/minimal-skin.css';
+import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
+import { createRoot } from 'react-dom/client';
+import { VideoProvider } from '../shared/react/providers';
+import { VideoSkinComponent } from '../shared/react/skins';
+import { useSkin } from '../shared/react/use-skin';
+import { useSource } from '../shared/react/use-source';
+import { SOURCES } from '../shared/sources';
+
+function App() {
+  const skin = useSkin();
+  const source = useSource();
+
+  return (
+    <VideoProvider>
+      <VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
+        <SimpleHlsVideo src={SOURCES[source].url} />
+      </VideoSkinComponent>
+    </VideoProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/packages/sandbox/templates/shared/sources.ts b/packages/sandbox/templates/shared/sources.ts
@@ -1,25 +1,35 @@
-export type SourceId = 'hls-1' | 'hls-2' | 'hls-3' | 'hls-4' | 'mp4-1';
+export type SourceId = 'hls-1' | 'hls-2' | 'hls-3' | 'hls-4' | 'hls-5' | 'mp4-1';
 
-export const SOURCES: Record<SourceId, { label: string; url: string; type: 'hls' | 'mp4' }> = {
+export const SOURCES: Record<SourceId, { label: string; url: string; type: 'hls' | 'mp4'; subType?: 'mp4' | 'ts' }> = {
   'hls-1': {
     label: 'HLS - Big Buck Bunny',
     url: 'https://stream.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA.m3u8',
     type: 'hls',
+    subType: 'ts',
   },
   'hls-2': {
     label: 'HLS - 2',
     url: 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8',
     type: 'hls',
+    subType: 'ts',
   },
   'hls-3': {
     label: 'HLS - Dancing Dude',
     url: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8',
     type: 'hls',
+    subType: 'mp4',
   },
   'hls-4': {
     label: 'HLS - Plyr',
     url: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',
     type: 'hls',
+    subType: 'mp4',
+  },
+  'hls-5': {
+    label: 'HLS - Mad Max Fury Road Trailer',
+    url: 'https://stream.mux.com/JX01bG8eB4uaoV3OpDuK602rBfvdSgrMObjwuUOBn4JrQ.m3u8',
+    type: 'hls',
+    subType: 'mp4',
   },
   'mp4-1': {
     label: 'MP4 - Dancing Dude',

diff --git a/packages/sandbox/templates/shell/app.tsx b/packages/sandbox/templates/shell/app.tsx
@@ -91,6 +91,7 @@ export function App() {
         onSourceChange={handleSourceChange}
         availableSources={availableSources}
         isBackgroundVideo={preset === 'background-video'}
+        isSimpleHlsVideo={preset === 'simple-hls-video'}
         platforms={PLATFORMS}
         stylings={STYLINGS}
         presets={PRESETS}

diff --git a/packages/sandbox/templates/shell/navbar.tsx b/packages/sandbox/templates/shell/navbar.tsx
@@ -15,10 +15,11 @@ type NavbarProps = {
   onSourceChange: (value: string) => void;
   availableSources: readonly SourceId[];
   isBackgroundVideo: boolean;
+  isSimpleHlsVideo: boolean;
   platforms: readonly Platform[];
   stylings: readonly Styling[];
   presets: readonly Preset[];
-  sources: Record<SourceId, { label: string; url: string; type: string }>;
+  sources: Record<SourceId, { label: string; url: string; type: string; subType?: string }>;
 };
 
 const SKIN_OPTIONS: readonly Skin[] = ['default', 'minimal'] satisfies readonly (typeof SKINS)[number][];
@@ -31,6 +32,7 @@ const PLATFORM_LABELS: Record<Platform, string> = {
 const PRESET_LABELS: Record<Preset, string> = {
   video: 'Video',
   'hls-video': 'HlsVideo',
+  'simple-hls-video': 'SimpleHlsVideo',
   audio: 'Audio',
   'background-video': 'Background Video',
 };
@@ -48,6 +50,7 @@ export function Navbar({
   onSourceChange,
   availableSources,
   isBackgroundVideo,
+  isSimpleHlsVideo,
   platforms,
   stylings,
   presets,
@@ -99,7 +102,13 @@ export function Navbar({
           label="Source"
           value={source}
           onChange={onSourceChange}
-          options={availableSources.map((id) => ({ value: id, label: sources[id].label }))}
+          options={
+            isSimpleHlsVideo
+              ? availableSources
+                  .filter((id) => sources[id].subType === 'mp4')
+                  .map((id) => ({ value: id, label: sources[id].label }))
+              : availableSources.map((id) => ({ value: id, label: sources[id].label }))
+          }
           disabled={isBackgroundVideo}
         />
       </div>