diff --git a/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..75e98a68 --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..a4c61a6a --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/background-video'; diff --git a/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..535a7967 --- /dev/null +++ b/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,9 @@ +import { BackgroundVideo } from '@videojs/react/media/background-video'; + +export default function BasicUsage() { + return ( +
+ +
+ ); +} diff --git a/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..1feb0b63 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..7d7de243 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts @@ -0,0 +1,3 @@ +import '@videojs/html/video/player'; +import '@videojs/html/media/hlsjs-video'; +import '@videojs/html/ui/cast-button'; diff --git a/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..3b6dc591 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx @@ -0,0 +1,28 @@ +import { CastButton, createPlayer } from '@videojs/react'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; +import { videoFeatures } from '@videojs/react/video'; + +const Player = createPlayer({ features: videoFeatures }); + +export default function BasicUsage() { + return ( + + + + ( + + )} + /> + + + ); +} diff --git a/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..ec80f6b4 --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..7fec108f --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/dash-video'; diff --git a/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..12529b86 --- /dev/null +++ b/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { DashVideo } from '@videojs/react/media/dash-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..61c40103 --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..78f5bb5a --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/hlsjs-video'; diff --git a/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..3d97e89a --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..102fba90 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html @@ -0,0 +1,6 @@ + diff --git a/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..c68a1ac5 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/mux-audio'; diff --git a/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..e7bc4fe7 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx @@ -0,0 +1,12 @@ +import { MuxAudio } from '@videojs/react/media/mux-audio'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..8ad52695 --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html @@ -0,0 +1,10 @@ + + + diff --git a/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..ab31f0a2 --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/mux-video'; diff --git a/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..2b041b1e --- /dev/null +++ b/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,15 @@ +import { MuxVideo } from '@videojs/react/media/mux-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..19e68ec0 --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..2d4dbd7f --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/native-hls-video'; diff --git a/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..bc389dff --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { NativeHlsVideo } from '@videojs/react/media/native-hls-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..586d72f9 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html @@ -0,0 +1,5 @@ + diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..77d7ba4f --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/simple-hls-audio-only'; diff --git a/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..95203010 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx @@ -0,0 +1,11 @@ +import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..8569d3a1 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..da2c5386 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/simple-hls-video'; diff --git a/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..e79ef101 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx index 8a07c620..2066612e 100644 --- a/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx +++ b/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx @@ -9,7 +9,7 @@ export default function BasicUsage() { - Tooltip content + Tooltip content diff --git a/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx b/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx index 59456098..95dd0651 100644 --- a/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx +++ b/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx @@ -10,7 +10,7 @@ export default function Grouping() { - Play video + Play video @@ -19,7 +19,7 @@ export default function Grouping() { - Mute audio + Mute audio @@ -28,7 +28,7 @@ export default function Grouping() { - Enter fullscreen + Enter fullscreen diff --git a/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..0a869b28 --- /dev/null +++ b/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx @@ -0,0 +1,53 @@ +import { createPlayer, isMediaSourceCapable, isMediaVideoDimensionsCapable } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; + +const Player = createPlayer({ + features: videoFeatures, +}); + +function MediaInfo() { + const media = Player.useMedia(); + + if (!media) return null; + + return ( +
+ {isMediaSourceCapable(media) && ( +
+
src
+
{media.currentSrc || '—'}
+
+ )} + {isMediaVideoDimensionsCapable(media) && ( + <> +
+
videoWidth
+
{media.videoWidth}px
+
+
+
videoHeight
+
{media.videoHeight}px
+
+ + )} +
+ ); +} + +export default function BasicUsage() { + return ( + + + + + ); +} diff --git a/site/src/content/docs/reference/background-video.mdx b/site/src/content/docs/reference/background-video.mdx index c54c1a08..ee5b2857 100644 --- a/site/src/content/docs/reference/background-video.mdx +++ b/site/src/content/docs/reference/background-video.mdx @@ -20,12 +20,17 @@ import Tr from "@/components/typography/Tr.astro"; import BasicUsageDemoReact from "@/components/docs/demos/background-video/react/css/BasicUsage"; import basicUsageReactTsx from "@/components/docs/demos/background-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/background-video/react/css/BasicUsage.css?raw"; +import BasicUsageDemoReactTailwind from "@/components/docs/demos/background-video/react/tailwind/BasicUsage"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/background-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/background-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.ts?raw"; Decorative background video. By default it's muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a `