پخشکننده ویدئو
video-playerکامپوننتپخشکنندهی ویدئوی آموزشی با فصلبندی، سرعت پخش، زیرنویس و ادامه از جای قبلی؛ زمانها فارسی و نوار زمان طبق قاعدهی رسانه چپبهراست.
مقدمه
۰:۰۰ / ۰:۰۰
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add video-playerنصب دستی
محتوای تب «کد» را در
components/ui/video-player.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { VideoPlayer } from "@/components/ui/video-player"23<VideoPlayer4 src="/videos/lesson-3.mp4"5 poster="/videos/lesson-3.webp"6 title="درس ۳: ساختار پوشهها در App Router"7 startAt={lastPosition}8 chapters={[9 { start: 0, title: "مقدمه" },10 { start: 95, title: "پوشهی app و فایل page" },11 { start: 310, title: "layout و مسیرهای تو در تو" },12 ]}13 captions={[{ src: "/videos/lesson-3.fa.vtt", srclang: "fa", label: "فارسی", default: true }]}14 onTimeUpdate={(t) => savePosition(t)}15 onEnded={() => markLessonDone()}16/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| src / poster | string | - | آدرس ویدئو و تصویر پیش از پخش. |
| title | string | - | روی لایهی توقف نشان داده میشه و نام دسترسپذیر ناحیه است. |
| chapters | { start: number; title: string }[] | - | فصلها با زمان شروع به ثانیه. روی نوار زمان علامت میخورن و فهرست کلیکپذیر زیر ویدئو میسازن. |
| captions | { src; srclang; label; default? }[] | - | زیرنویسهای WebVTT. |
| showChapters | boolean | true | نمایش فهرست فصلها زیر ویدئو. |
| startAt | number | 0 | ثانیهی شروع؛ برای «ادامه از جایی که ماندید». |
| rates | number[] | [0.75, 1, 1.25, 1.5, 2] | سرعتهای قابل انتخاب. |
| onTimeUpdate / onEnded | (t, duration) => void / () => void | - | برای ذخیرهی پیشرفت و تیک زدن درس. |
نکتههای راستچین
- نوار زمان و دکمههای پخش عمداً dir="ltr" هستن: پیشرفت رسانه جهت زمان را نشان میده، نه جهت متن (قاعدهی bidi متریال). فقط برچسبها و فهرست فصلها راستچیناند.
- میانبرها وقتی فوکوس روی ویدئوست: Space یا K پخش/توقف، فلش راست/چپ ۵ ثانیه جلو/عقب، M بیصدا، F تمامصفحه.
- هر دکمه حداقل ۴۴ پیکسل است؛ در عرض کم (container query) دکمههای ۱۰ ثانیه و بعد زمان پنهان میشن تا کنترلها سرریز نکنن.