nili/ui
enfaartr
Tüm bileşenler

VideoPlayer

Genel görünüm
12 export3 varyant ekseni17 prop4 dosya
import { VideoPlayer, VideoPlayerLabels, VideoRatio } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Gerçek bir video öğesinin üzerinde özel denetimler. Tanınmayan her şey medya öğesine yayılır; böylece preload, crossOrigin ve medya olayları bu bileşen onları yeniden bildirmeden çalışır — className istisnadır, kapsayıcıyı biçimlendirir.

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",
      }}
    />
  )
}

En boy oranları

Çerçeveyi dosya değil ratio belirler — böylece üstveri geldiğinde yerleşim zıplamaz. auto kutuyu videonun kendi boyutlarına bırakır.

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" />
    </>
  )
}

Denetim yoğunluğu

size videonun değil denetimlerin boyutunu belirler. Oynatıcı bir kartta ya da kenar çubuğunda dururken ve tam boy çubuk çerçeveyi kalabalıklaştırırken sm kullanın.

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" />
    </>
  )
}

Altyazılar, otomatik oynatma ve yerel denetimler

tracks altyazılar için track öğeleri alır — onları ekleyin; sessiz otomatik oynayan bir video onlarsız okunmaz. Otomatik oynatma her tarayıcıda yalnızca sessizken çalışır, bu yüzden ikisi birlikte gider. nativeControls, resim içinde resim ve yayın menülerine ihtiyaç duyduğunuzda çubuğu tarayıcıya geri verir.

altyazılı
00:00 / 00:00
yerel denetimler
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 />
    </>
  )
}

Olaylar ve ileri sarma

onPlayChange ve onTimeChange analitik ve bir dökümü eşitlemek içindir. seekStep ok tuşlarının ne kadar atlayacağını belirler — varsayılan beş saniyedir ve uzun bir ders genelde daha fazlasını ister.

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)}
    />
  )
}