nili/ui
enfaartr
كل المكوّنات

VideoPlayer

عرض شامل
١٢ تصدير٣ محور تنويع١٧ خاصيّة٤ ملف
import { VideoPlayer, VideoPlayerLabels, VideoRatio } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

أساسي

عناصر تحكّم مخصّصة فوق عنصر فيديو حقيقي. وكل ما لا يُعرف يُنشر على عنصر الوسائط، فتعمل preload وcrossOrigin وأحداث الوسائط دون أن يعيد هذا المكوّن تعريفها — باستثناء className التي تنسّق الحاوية.

00:00 / 00:00
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
00:00 / 00:00
4/3
00:00 / 00:00
1/1
00:00 / 00:00
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
00:00 / 00:00
sm
00:00 / 00:00
import { VideoPlayer } from "@nili/ui"

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

التسميات التوضيحية والتشغيل التلقائي وعناصر التحكّم الأصلية

يقبل tracks عناصر track للتسميات التوضيحية — أرفقها، فالفيديو المكتوم ذاتي التشغيل غير مفهوم بدونها. والتشغيل التلقائي لا يعمل إلا مكتومًا في كل المتصفّحات، ولذلك يترافقان. ويعيد nativeControls الشريط إلى المتصفّح حين تحتاج قوائم صورة-داخل-صورة والبثّ.

مع تسميات توضيحية
00:00 / 00:00
عناصر التحكّم الأصلية
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 مقدار قفزة مفاتيح الأسهم — الافتراضي خمس ثوانٍ، ومحاضرة طويلة تريد أكثر عادةً.

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

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