Video

1
import {
2
  VideoControlFullscreen,
3
  VideoControlGroup,
4
  VideoControlList,
5
  VideoControlLoop,
6
  VideoControlPlay,
7
  VideoControlPlaybackRate,
8
  VideoControlSeek,
9
  VideoControlTimer,
10
  VideoControlVolume,
11
  VideoPlayer,
12
  VideoProvider,
13
} from "@/components/ui/video";
14
 
15
export default function VideoDemo() {
16
  return (
17
    <>
18
      <VideoProvider>
19
        <VideoPlayer src="/assets/video.webm">
20
          <VideoControlSeek />
21
          <VideoControlList>
22
            <VideoControlGroup>
23
              <VideoControlPlay>Play</VideoControlPlay>
24
              <VideoControlTimer />
25
            </VideoControlGroup>
26
            <VideoControlGroup>
27
              <VideoControlLoop>Loop</VideoControlLoop>
28
              <VideoControlPlaybackRate rates={[0.5, 0.75, 1, 1.25, 2]}>
29
                Playback Rate
30
              </VideoControlPlaybackRate>
31
              <VideoControlVolume>Volume</VideoControlVolume>
32
              <VideoControlFullscreen>Fullscreen</VideoControlFullscreen>
33
            </VideoControlGroup>
34
          </VideoControlList>
35
        </VideoPlayer>
36
      </VideoProvider>
37
      <span className="text-muted-foreground italic">
38
        Porsche 911 - The one and always. © Porsche
39
      </span>
40
    </>
41
  );
42
}