# Video player: Right to left

> Labels follow the page language. The timeline and transport controls stay left to right, the way platform media players do.

Example: https://hextaui.com/docs/video-player/examples/rtl
Component docs: https://hextaui.com/docs/video-player.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/video-player-rtl.json
```

This adds `components/examples/video-player/rtl.tsx` with the Video player component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/video-player/rtl.tsx"
import {
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerFullscreenButton,
  VideoPlayerPlaybackRate,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerSpacer,
  VideoPlayerTime,
  VideoPlayerVolume,
} from "@/components/ui/video-player"

export function VideoPlayerRtl() {
  return (
    <div dir="rtl" className="w-full max-w-xl">
      <VideoPlayer aria-label="مشغل الفيديو">
        <VideoPlayerContent
          src="https://media.w3.org/2010/05/sintel/trailer.mp4"
          poster="https://media.w3.org/2010/05/sintel/poster.png"
          aria-label="إعلان سينتل"
        />
        <VideoPlayerControls>
          <VideoPlayerSeekBar label="تقديم" />
          <VideoPlayerPlayButton
            playLabel="تشغيل"
            pauseLabel="إيقاف مؤقت"
            replayLabel="إعادة التشغيل"
          />
          <VideoPlayerVolume
            label="مستوى الصوت"
            muteLabel="كتم الصوت"
            unmuteLabel="إلغاء كتم الصوت"
          />
          <VideoPlayerTime />
          <VideoPlayerSpacer />
          <VideoPlayerPlaybackRate label="سرعة التشغيل" normalLabel="عادي" />
          <VideoPlayerFullscreenButton
            enterLabel="ملء الشاشة"
            exitLabel="الخروج من ملء الشاشة"
          />
        </VideoPlayerControls>
      </VideoPlayer>
    </div>
  )
}
```

## Props in this example

### VideoPlayerSeekBar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Seek"` |  |

### VideoPlayerPlayButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `playLabel` | `string` | `"Play"` |  |
| `pauseLabel` | `string` | `"Pause"` |  |
| `replayLabel` | `string` | `"Replay"` |  |

### VideoPlayerVolume

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Volume"` |  |
| `muteLabel` | `string` | `"Mute"` |  |
| `unmuteLabel` | `string` | `"Unmute"` |  |

### VideoPlayerPlaybackRate

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Playback speed"` |  |
| `normalLabel` | `string` | `"Normal"` |  |

### VideoPlayerFullscreenButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `enterLabel` | `string` | `"Full screen"` |  |
| `exitLabel` | `string` | `"Exit full screen"` |  |

## More Video player examples

- [Bar](https://hextaui.com/docs/video-player/examples/bar.md)
- [Minimal](https://hextaui.com/docs/video-player/examples/minimal.md)
- [Seek offsets and speeds](https://hextaui.com/docs/video-player/examples/seek-offsets.md)
- [Page-wide shortcuts](https://hextaui.com/docs/video-player/examples/global-shortcuts.md)
- [Captions](https://hextaui.com/docs/video-player/examples/captions.md)
- [Custom controls](https://hextaui.com/docs/video-player/examples/custom-controls.md)
- [Error](https://hextaui.com/docs/video-player/examples/error.md)