الثيم كنز

المكوّنات

مشغّل الفيديو

يشغّل الفيديو داخل الصفحة بعناصر تحكم كاملة: التشغيل، والتقدم، والتخطي 30 ثانية، والصوت، والإعدادات، وملء الشاشة. والحجم الصغير مصغّرة معنونة تفتح المشغّل.

Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add video-player

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/video-player

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer
  src="/videos/wallet.webm"
  poster="/videos/wallet.webp"
  title="Set up your wallet"
  captions={[{ src: "/videos/wallet.ar.vtt", srcLang: "ar", label: "العربية", default: true }]}
/>

أمثلة

مصغّرات معنونة

الحجم الصغير (size="sm") زر يفتح الفيديو، بعنوان وسطر فوقه للجزء والمدة. في العربية يبدأ النص من اليمين، ولا تنعكس أيقونة التشغيل.

احصل على الكود ›

مرجع الخصائص

VideoPlayer

الخاصية	النوع	الافتراضي	الوصف
`src / poster`	`string`	لا يوجد	الفيديو وصورة الغلاف قبل التشغيل؛ اختر غلافًا يدل على موضوعه.
`title`	`string`	لا يوجد	ما الفيديو: اسم المشغّل، ويُطبع في الحجم الصغير.
`size`	`"lg" \| "sm"`	`"lg"`	خاصية Size: الكبير يشغّل في مكانه، والصغير مصغّرة تفتحه.
`overline`	`ReactNode`	لا يوجد	سطر قصير فوق العنوان في الحجم الصغير (الجزء والمدة).
`captions`	`{ src, srcLang, label, default? }[]`	لا يوجد	مسارات الترجمة (WebVTT)؛ قدّم ترجمة عربية في الصفحات العربية.
`onNext`	`() => void`	لا يوجد	زر «التالي»؛ لا يظهر دونه.
`onOpen`	`() => void`	لا يوجد	في الحجم الصغير: يفتح الفيديو (في نافذة حوارية أو صفحة).

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Space`	تشغيل أو إيقاف مؤقت عندما يكون التركيز على المشغّل.
`ArrowLeftArrowRight`	رجوع أو تقديم 5 ثوانٍ، بالاتجاه نفسه في العربية؛ وعلى شريط التشغيل ثانية واحدة.
`M`	كتم الصوت أو إلغاؤه.
`F`	ملء الشاشة أو الخروج منه.

ARIA

كل عنصر تحكم زر باسم (تشغيل، إيقاف مؤقت، رجوع 30 ثانية)، والاسم يتغير مع الحالة.
شريط التشغيل منزلق يقرأ الوقت نصًا: «0:23 من 4:39».
عناصر التحكم تظهر عند الإيقاف وعند المرور أو التركيز أو اللمس، ولا تختفي ما دام الفيديو موقوفًا.
لا تشغيل تلقائي، والترجمة اختيار في الإعدادات وليست مدمجة في الصورة.

ملاحظات العربية والاتجاه

ينعكس

العنوان والسطر فوقه في الحجم الصغير، والترجمة، وقائمة الإعدادات، والتخطيط حول المشغّل.

لا ينعكس

شريط التحكم كما في الإنجليزية: التشغيل أولًا، وشريط التشغيل يمتلئ من اليسار إلى اليمين، وملء الشاشة أخيرًا.
الرجوع 30 ثانية على اليسار والتقديم على اليمين، وسهم التشغيل نحو اليمين.
الأوقات تُقرأ من اليسار إلى اليمين، والأسهم تتقدم وترجع بالاتجاه نفسه.

الأرقام: الأوقات بالأرقام الغربية ما لم يستخدم المنتج الأرقام المشرقية.
الخط العربي: الأوقات body-12 بوزن Semibold بالأبيض، والعنوان في الحجم الصغير body-16 Semibold فوق سطر body-12.
النص ثنائي الاتجاه: شريط التحكم جزيرة LTR داخل الصفحة العربية.