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 />
24
              <VideoControlTimer />
25
            </VideoControlGroup>
26
            <VideoControlGroup>
27
              <VideoControlLoop />
28
              <VideoControlPlaybackRate rates={[0.5, 0.75, 1, 1.25, 2]} />
29
              <VideoControlVolume />
30
              <VideoControlFullscreen />
31
            </VideoControlGroup>
32
          </VideoControlList>
33
        </VideoPlayer>
34
      </VideoProvider>
35
      <span className="text-muted-foreground italic">
36
        Porsche 911 - The one and always. © Porsche
37
      </span>
38
    </>
39
  );
40
}