Background video.
Film latar lokal tanpa suara dengan poster, tombol jeda, serta penghormatan reduced motion dan save-data.
Preview
<?= component('background-video', ['src' => '/assets/moontel/hero.mp4', 'poster' => '/assets/moontel/courtyard.webp', 'label' => 'Moontel — animated original hotel artwork']) ?>Usage
Load page-layout.css and cms-layout-widgets.js with defer. Use inside a hero section or standalone. Src accepts local /assets/ MP4/WebM; poster accepts local /assets/ images or /media/ID. Muted playback is progressive and pauses offscreen or in background tabs. No autoplay in the visual canvas.
- Gunakan layout DL yang sudah memuat CSS dan dl.js.
- Letakkan kode berikut di view PHP Anda.
- Ganti data contoh dengan nilai aplikasi. Teks di-escape otomatis.
<?= component('background-video', ['src' => '/assets/moontel/hero.mp4', 'poster' => '/assets/moontel/courtyard.webp', 'label' => 'Moontel — animated original hotel artwork']) ?>API reference
Props PHP yang didukung implementasi DL. Field di dalam array mengikuti bentuk pada kolom Type. Props yang tidak dicantumkan tidak menjadi bagian API komponen.
| Prop | Type / values | Panduan |
|---|---|---|
src | string | Local /assets/ MP4 or WebM path; traversal and remote sources are rejected. |
poster | string | A local /media/ID or /assets/ WebP, PNG or JPEG image. |
label | string | Accessible escaped text describing the film. |
Behavior & accessibility
An explicit keyboard-accessible play/pause control, a descriptive label and reduced-motion/save-data defaults. Keep essential content outside the video.
Uji keyboard, fokus, dan pembaca layar pada halaman aplikasi Anda. Contoh ini tidak menggantikan audit aksesibilitas aplikasi secara menyeluruh.
Source & agent context
Source tersedia di views/components/background-video.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
php dl component background-video