diff --git a/packages/sandbox/templates/constants.ts b/packages/sandbox/templates/constants.ts
index e806428f..2be89747 100644
--- 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', 'audio', 'background-video'] as const;
+export const PRESETS = ['video', 'hls-video', 'audio', 'background-video'] as const;
diff --git a/packages/sandbox/templates/html-hls-video/index.html b/packages/sandbox/templates/html-hls-video/index.html
new file mode 100644
index 00000000..70e9ffcf
--- /dev/null
+++ b/packages/sandbox/templates/html-hls-video/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Sandbox — HTML Video
+
+
+
+
+
+
+
+
+
diff --git a/packages/sandbox/templates/html-hls-video/main.ts b/packages/sandbox/templates/html-hls-video/main.ts
new file mode 100644
index 00000000..37dd7683
--- /dev/null
+++ b/packages/sandbox/templates/html-hls-video/main.ts
@@ -0,0 +1,41 @@
+import '@videojs/html/video/player';
+import '@videojs/html/media/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`
+
+ <${tag} class="w-full aspect-video max-w-4xl mx-auto">
+
+
+
+ `;
+}
+
+render();
+
+onSkinChange((skin) => {
+ currentSkin = skin;
+ render();
+});
+
+onSourceChange((source) => {
+ currentSource = source;
+ render();
+});
diff --git a/packages/sandbox/templates/react-hls-video/index.html b/packages/sandbox/templates/react-hls-video/index.html
new file mode 100644
index 00000000..29ec7003
--- /dev/null
+++ b/packages/sandbox/templates/react-hls-video/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Sandbox — React Video
+
+
+
+
+
+
+
+
+
diff --git a/packages/sandbox/templates/react-hls-video/main.tsx b/packages/sandbox/templates/react-hls-video/main.tsx
new file mode 100644
index 00000000..dadccb8c
--- /dev/null
+++ b/packages/sandbox/templates/react-hls-video/main.tsx
@@ -0,0 +1,24 @@
+import '@videojs/react/video/skin.css';
+import '@videojs/react/video/minimal-skin.css';
+import { HlsVideo } from '@videojs/react/media/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 (
+
+
+
+
+
+ );
+}
+
+createRoot(document.getElementById('root')!).render();
diff --git a/packages/sandbox/templates/shell/navbar.tsx b/packages/sandbox/templates/shell/navbar.tsx
index bb5ccc7e..0c59e37e 100644
--- a/packages/sandbox/templates/shell/navbar.tsx
+++ b/packages/sandbox/templates/shell/navbar.tsx
@@ -30,6 +30,7 @@ const PLATFORM_LABELS: Record = {
const PRESET_LABELS: Record = {
video: 'Video',
+ 'hls-video': 'HlsVideo',
audio: 'Audio',
'background-video': 'Background Video',
};
diff --git a/packages/sandbox/vite.config.ts b/packages/sandbox/vite.config.ts
index c395eb0d..d20b8449 100644
--- a/packages/sandbox/vite.config.ts
+++ b/packages/sandbox/vite.config.ts
@@ -27,11 +27,13 @@ export default defineConfig({
input: {
main: resolve(__dirname, 'src/index.html'),
'html-video': resolve(__dirname, 'src/html-video/index.html'),
+ 'html-hls-video': resolve(__dirname, 'src/html-hls-video/index.html'),
'html-audio': resolve(__dirname, 'src/html-audio/index.html'),
'html-video-tailwind': resolve(__dirname, 'src/html-video-tailwind/index.html'),
'html-audio-tailwind': resolve(__dirname, 'src/html-audio-tailwind/index.html'),
'html-background-video': resolve(__dirname, 'src/html-background-video/index.html'),
'react-video': resolve(__dirname, 'src/react-video/index.html'),
+ 'react-hls-video': resolve(__dirname, 'src/react-hls-video/index.html'),
'react-audio': resolve(__dirname, 'src/react-audio/index.html'),
'react-video-tailwind': resolve(__dirname, 'src/react-video-tailwind/index.html'),
'react-audio-tailwind': resolve(__dirname, 'src/react-audio-tailwind/index.html'),