docs: add captions button (#777)

2026-08-16 02:45:09 +00:00 · 2026-03-09 14:55:44 -05:00
parent c20d884932
commit dc84216de5
10 changed files with 218 additions and 0 deletions
@@ -0,0 +1,10 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+import './BasicUsage.css';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,34 @@
+.html-captions-button-basic {
+  position: relative;
+}
+
+.html-captions-button-basic video {
+  width: 100%;
+}
+
+.html-captions-button-basic__button {
+  padding-block: 8px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-inline: 20px;
+  cursor: pointer;
+}
+
+.html-captions-button-basic__button .show-when-active {
+  display: none;
+}
+.html-captions-button-basic__button .show-when-inactive {
+  display: none;
+}
+.html-captions-button-basic__button[data-active] .show-when-active {
+  display: inline;
+}
+.html-captions-button-basic__button:not([data-active]) .show-when-inactive {
+  display: inline;
+}
@@ -0,0 +1,17 @@
+<video-player class="html-captions-button-basic">
+    <media-container>
+        <video
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        >
+            <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srclang="en" label="English" />
+        </video>
+        <media-captions-button class="html-captions-button-basic__button">
+            <span class="show-when-active">Captions Off</span>
+            <span class="show-when-inactive">Captions On</span>
+        </media-captions-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/captions-button';
@@ -0,0 +1,21 @@
+.react-captions-button-basic {
+  position: relative;
+}
+
+.react-captions-button-basic video {
+  width: 100%;
+}
+
+.react-captions-button-basic__button {
+  padding-block: 8px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  color: black;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  padding-inline: 20px;
+  cursor: pointer;
+}
@@ -0,0 +1,30 @@
+import { CaptionsButton, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+import './BasicUsage.css';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="react-captions-button-basic">
+        <Video
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        >
+          <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
+        </Video>
+        <CaptionsButton
+          className="react-captions-button-basic__button"
+          render={(props, state) => (
+            <button {...props}>{state.subtitlesShowing ? 'Captions Off' : 'Captions On'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}