Körsatiş · compound
Video pleyer
Brauzer videosi ustida öz boşqaruvi: katta ijro tugmasi, progress (suriş), vaqt, ovoz, taglavha (CC) va töliq ekran. Boşqaruv JS bilan yaratiladi — HTMLda faqat <video> (va <track>). Ijro paytida 2,5 soniyadan keyin yaşirinadi; pleyer fokusda bölganda Space/K, ← →, J L, ↑ ↓, M, C, F işlaydi.
Anatomiya
- root
.fx-videoplayerşart - video
.fx-videoplayer__videoşart - big
.fx-videoplayer__bigixtiyoriy - bar
.fx-videoplayer__barixtiyoriy - seek
.fx-videoplayer__seekixtiyoriy - row
.fx-videoplayer__rowixtiyoriy - button
.fx-videoplayer__btnixtiyoriy - volume
.fx-videoplayer__volixtiyoriy - time
.fx-videoplayer__timeixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space, K | Ijro / pauza |
| ← → | 5 soniya orqaga / oldinga |
| J, L | 10 soniya orqaga / oldinga |
| ↑ ↓ | Ovoz ±10 % |
| M | Ovozni öçiriş / yoqiş |
| C | Taglavha |
| F | Töliq ekran |
| 0–9 | Videoning 0–90 % ga ötiş |
Pleyer role="group" + aria-label, tabindex=0 (klaviatura yorliqlari şu yerda). Barça tugmalarda aria-label (holatga qarab “Ijro etiş” / “Pauza”), CC va töliq ekran aria-pressed (yoniq — tagiga çiziq). Progress — native range, aria-valuetext “0:12 / 3:40”. Boşqaruv fokus içida yaşirinmaydi.
Naqş: WAI-ARIA APG slider · rol group
Kod
AI uçun: qaçon işlatiladi
- Öz saytingizdagi video (dars, mahsulot tanişuvi, yozuv) — brend uslubidagi boşqaruv bilan.
- Faqat ovoz →
audioplayer - YouTube/Vimeo iframe →
peek - Video avtomatik ovozli boşlanmasin — ovozsiz `muted autoplay` faqat bezak uçun.
- Muhim videoga taglavhasiz qöymang — `<track kind="captions">` qöşing (CC tugmasi özi çiqadi).
- Boşqaruvni yaşirib qöyib, klaviatura bilan oçilmaydigan qilmang (fokus uni qaytaradi).
npx foxui add videoplayer
<div class="fx-videoplayer" data-fx-videoplayer aria-label="FoxUI tanişuv videosi">
<video class="fx-videoplayer__video" preload="metadata" playsinline src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">
<track kind="captions" srclang="uz" label="Özbekça" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00:00.000%20--%3E%2000:03.000%0AGul%20ochilmoqda">
</video>
</div>Tokenlar: --fx-bg-overlay --fx-border-color-focus --fx-border-width-focus --fx-ease-standard --fx-font-size-md --fx-font-size-xs --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-sm --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-control-lg --fx-size-control-md --fx-size-icon-md --fx-slider-value --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-5 --fx-space-6 --fx-text-on-brand