HextaUI

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.

0:00 / --:--
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>
  )
}

This adds the example as components/examples/video-player/rtl.tsx, together with the Video player component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/video-player-rtl.json

To add only the component, follow the Video player installation.

Props in this example

The Video player props this example sets, from the API reference.

PropTypeDefault
label
string"Seek"
PropTypeDefault
playLabel
string"Play"
pauseLabel
string"Pause"
replayLabel
string"Replay"
PropTypeDefault
label
string"Volume"
muteLabel
string"Mute"
unmuteLabel
string"Unmute"
PropTypeDefault
label
string"Playback speed"
normalLabel
string"Normal"
PropTypeDefault
enterLabel
string"Full screen"
exitLabel
string"Exit full screen"

Every prop is in the Video player API reference.

See them all, with keyboard support and accessibility notes, on the Video player page.