Medya oynatıcı
Video ve ses dosyalarını, tarayıcıdan tarayıcıya değişen yerleşik denetimler yerine temaya uyan tek bir denetim çubuğuyla oynatır: oynat/duraklat, konum çubuğu, süre, ses, hız ve tam ekran. JavaScript çalışmazsa tarayıcının kendi denetimleri görünür, dosya yine oynatılabilir.
Video
src oynatılacak dosya, poster oynatma başlamadan önce görünen görsel, title ise oynatıcının ekran okuyucudaki adıdır. Çerçeve bulunduğu alanın genişliğini 16:9 oranında doldurur; başka bir oran için class="aspect-square" ya da class="aspect-[4/3]" verin. Videoya tıklamak oynatır ya da duraklatır. Oynatma sürerken fare birkaç saniye kıpırdamazsa denetimler kaybolur; fareyi oynatıcının üzerinde gezdirmek ya da klavyeyle bir denetime geçmek onları geri getirir.
<acun:media-player
src="../assets/media/sample-video.mp4"
poster="../assets/media/sample-poster.jpg"
title="Tanıtım videosu"
/>| Prop | Değerler |
|---|---|
src | Dosya adresi |
poster | Kapak görseli (yalnızca video) |
title | Ekran okuyucu adı; varsayılan "Video oynatıcı" |
Ses
audio verildiğinde oynatıcı tek satırlık bir çubuğa dönüşür: oynat düğmesi, geçen süre, konum çubuğu, toplam süre, ses ve hız. Alan daraldıkça önce ses düzeyi çubuğu, sonra hız seçimi gizlenir; bu karar ekran genişliğine göre değil oynatıcının kendi genişliğine göre verilir, dar bir yan sütunda da düzgün görünür. Açık ve koyu temaya uyar. Ses düzeninde kapak görseli, tam ekran ve altyazı düğmesi yoktur.
<acun:media-player audio src="../assets/media/sample-audio.wav" title="Akor örneği" />| Prop | Değerler |
|---|---|
audio | true | false |
title | Ekran okuyucu adı; varsayılan "Ses oynatıcı" |
Altyazılar ve kaynaklar
WebVTT altyazı dosyalarını <track> öğesi olarak bileşenin içine yazın. captions ya da subtitles türünde bir iz varsa denetim çubuğunda altyazı düğmesi belirir; default işaretli iz sayfa açılınca gösterilir. Birden çok iz verilirse düğme default olanı, yoksa ilkini açıp kapatır. Altyazıyı oynatıcı kendisi çizer: denetim çubuğunun üstünde durur, çubuk gizlenince aşağı iner. Aynı videoyu birden çok biçimde sunmak için src yerine sources verin; tarayıcı listede destekleyebildiği ilk dosyayı oynatır.
<acun:media-player
:sources="[
['src' => '../assets/media/sample-video.webm', 'type' => 'video/webm'],
['src' => '../assets/media/sample-video.mp4', 'type' => 'video/mp4'],
]"
poster="../assets/media/sample-poster.jpg"
title="Altyazılı tanıtım"
>
<track kind="captions" src="../assets/media/sample-captions-tr.vtt" srclang="tr" label="Türkçe" default>
</acun:media-player>| Prop | Değerler |
|---|---|
sources | [['src' => …, 'type' => 'video/webm'], …] ya da düz adres dizisi |
(içerik) | <track> öğeleri; default işaretli iz açık başlar |
Klavye ve erişilebilirlik
Odak oynatıcının içindeyken (videoya tıklandığında ya da Tab ile bir denetime geçildiğinde) Boşluk veya K oynatır ve duraklatır, ← → beş saniye geri ya da ileri sarar, ↑ ↓ sesi %10 değiştirir, M sesi kapatıp açar, F tam ekrana geçer, C altyazıyı açıp kapatır, Home ve End başa ya da sona gider. Ses düzeyi çubuğunda oklar, hız seçiminde tüm tuşlar o denetimin kendi işini yapar. Düğmelerin ekran okuyucu adı duruma göre değişir ("Oynat" / "Duraklat", "Sesi kapat" / "Sesi aç", "Tam ekran" / "Tam ekrandan çık"); konum çubuğu değerini "1:05 / 3:20" biçiminde okutur. Odak halkaları klavyeyle gezinirken hep görünür; işletim sisteminde hareket azaltma açıksa geçiş animasyonları kapanır. speeds hız seçimindeki değerleri belirler, muted ve loop medya öğesine olduğu gibi aktarılır.
<acun:media-player
src="../assets/media/sample-video.mp4"
poster="../assets/media/sample-poster.jpg"
title="Klavye denemesi"
:speeds="[1, 1.5, 2]"
muted
loop
/>| Prop | Değerler |
|---|---|
speeds | Hız listesi, ör. [1, 1.5, 2]; [] hız seçimini kaldırır |
muted · loop · autoplay | Medya öğesine aktarılır; tarayıcılar sesli otomatik oynatmayı çoğunlukla engeller |
Livewire içinde
Bileşenin kökünde wire:ignore bulunur: sayfanın başka bir yeri güncellendiğinde Livewire oynatıcıya dokunmaz, oynatma kesilmez ve tarayıcının yerleşik denetimleri geri gelmez. Kaynağı değiştirmek için oynatıcıya kaynakla birlikte değişen bir wire:key verin; Livewire eski oynatıcıyı kaldırıp yenisini ekler. ended, play, pause gibi medya olayları kabarcıklanmadığı için köke .capture ile dinleyici ekleyin; örnekte video bitince bileşenin metodu çağrılır. id, class, wire:key, x-on:* ve data-* gibi ek öznitelikler kök öğeye eklenir.
<div>
<acun:media-player
:src="$ders->video_url"
:poster="$ders->kapak_url"
:title="$ders->baslik"
wire:key="ders-video-{{ $ders->id }}"
x-on:ended.capture="$wire.tamamlandi()"
/>
<acun:button wire:click="sonrakiDers" class="mt-4">Sonraki ders</acun:button>
</div>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
src | null | Medya dosyasının adresi |
sources | [] | Birden çok biçim: [['src' => …, 'type' => 'video/mp4'], …] ya da düz adres dizisi; tarayıcı desteklediği ilkini oynatır |
poster | null | Oynatma başlamadan görünen görsel (yalnızca video) |
audio | false | Video çerçevesi yerine tek satırlık ses çubuğu |
title | null | Ekran okuyucu adı; verilmezse "Video oynatıcı" ya da "Ses oynatıcı" |
preload | metadata | none | metadata | auto; medya öğesine aktarılır |
autoplay | false | Sayfa açılınca oynatmaya başlar; sesli otomatik oynatma çoğu tarayıcıda engellenir, muted ile kullanın |
muted | false | Sessiz başlar |
loop | false | Bitince baştan başlar |
speeds | [0.5, 0.75, 1, 1.25, 1.5, 2] | Hız seçimindeki değerler; [] hız seçimini gizler |
(öznitelikler) | — | id, class, wire:key, x-on:*, data-* … kök öğeye eklenir (class birleştirilir); class içinde aspect-* varsa 16:9 oranı uygulanmaz |