nili/ui
enfaartr
همه‌ی کامپوننت‌ها

VideoPlayer

نمای کلی
۱۲ اکسپورت۳ محور واریانت۱۷ پراپ۴ فایل
import { VideoPlayer, VideoPlayerLabels, VideoRatio } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

کنترل‌های سفارشی روی یک المان ویدیوی واقعی. هرچه ناشناخته باشد روی المان مدیا پخش می‌شود، پس preload، crossOrigin و رویدادهای مدیا بدون اینکه این کامپوننت دوباره اعلامشان کند کار می‌کنند — className استثناست که ظرف را استایل می‌دهد.

۰۰:۰۰ / ۰۰:۰۰
import { VideoPlayer } from "@nili/ui"

export function Example() {
  return (
    <VideoPlayer
      src="/media/flower.mp4"
      poster="/media/flower.jpg"
      labels={{
        root: "Product tour",
        play: "Play",
        pause: "Pause",
        seek: "Seek",
        fullscreen: "Full screen",
      }}
    />
  )
}

نسبت‌های تصویر

قاب را ratio تعیین می‌کند نه فایل — تا وقتی فراداده می‌رسد چیدمان نپرد. auto جعبه را به ابعاد خود ویدیو برمی‌گرداند.

16/9
۰۰:۰۰ / ۰۰:۰۰
4/3
۰۰:۰۰ / ۰۰:۰۰
1/1
۰۰:۰۰ / ۰۰:۰۰
import { VideoPlayer } from "@nili/ui"

export function Example() {
  return (
    <>
      <VideoPlayer src={src} ratio="16/9" />
      <VideoPlayer src={src} ratio="4/3" />
      <VideoPlayer src={src} ratio="1/1" />
      <VideoPlayer src={src} ratio="auto" />
    </>
  )
}

چگالی کنترل‌ها

size اندازهٔ کنترل‌ها را تعیین می‌کند نه اندازهٔ ویدیو را. وقتی پخش‌کننده داخل کارت یا سایدبار است و نوار تمام‌اندازه قاب را شلوغ می‌کند از sm استفاده کنید.

md
۰۰:۰۰ / ۰۰:۰۰
sm
۰۰:۰۰ / ۰۰:۰۰
import { VideoPlayer } from "@nili/ui"

export function Example() {
  return (
    <>
      <VideoPlayer src={src} size="md" />
      <VideoPlayer src={src} size="sm" />
    </>
  )
}

زیرنویس، پخش خودکار و کنترل‌های بومی

tracks المان‌های track را برای زیرنویس می‌گیرد — حتماً بگذاریدشان، چون ویدیوی بی‌صدای خودپخش بدون آن‌ها خوانده نمی‌شود. پخش خودکار در همهٔ مرورگرها فقط در حالت بی‌صدا کار می‌کند، و برای همین این دو با هم می‌آیند. nativeControls نوار را به مرورگر پس می‌دهد وقتی به منوی تصویر-در-تصویر و ارسال به دستگاه نیاز دارید.

با زیرنویس
۰۰:۰۰ / ۰۰:۰۰
کنترل‌های بومی
import { VideoPlayer } from "@nili/ui"

export function Example() {
  return (
    <>
      <VideoPlayer
        src={src}
        tracks={
          <track
            kind="captions"
            srcLang="en"
            label="English"
            src="/media/flower.en.vtt"
            default
          />
        }
      />

      {/* muted autoplay, looping — a background clip */}
      <VideoPlayer src={src} autoPlay loop muted />

      {/* the browser's own controls */}
      <VideoPlayer src={src} nativeControls />
    </>
  )
}

رویدادها و جابه‌جایی

onPlayChange و onTimeChange برای تحلیل و همگام‌کردن متن پیاده‌شده هستند. seekStep تعیین می‌کند کلیدهای جهت چقدر بپرند — پیش‌فرض پنج ثانیه است و یک سخنرانی بلند معمولاً بیشتر می‌خواهد.

۰۰:۰۰ / ۰۰:۰۰
import { VideoPlayer } from "@nili/ui"

export function Example() {
  return (
    <VideoPlayer
      src={src}
      seekStep={10}
      onPlayChange={(playing) => track(playing ? "play" : "pause")}
      onTimeChange={(time) => syncTranscript(time)}
    />
  )
}