Video v ozadju
Ta stran prikazuje funkcijo videa v ozadju s podporo za samodejno predvajanje, zanko in prekrivanje. Video se samodejno predvaja v ozadju, medtem ko se premikate.
Samodejno predvajanje
Videoposnetki se začnejo samodejno predvajati, ko se stran naloži. Privzeto utišan zaradi skladnosti s pravilniki o samodejnem predvajanju brskalnika.
Brezšivna zanka
Videoposnetki se brezhibno ponavljajo in ustvarjajo neprekinjeno ambientalno ozadje, ki izboljša vizualno izkušnjo.
Mobilna rezerva
Možnost prikaza slike plakata na mobilnih napravah namesto videa, da prihranite pasovno širino in baterijo.
Konfiguracija
Konfigurirajte videoposnetke v ozadju na stran config/params/canvasAnimations.php:
'site/bg-video' => [ 'enabled' => true, 'type' => 'video', 'video' => [ 'src' => '@web/videos/spaceship.mp4', 'poster' => '@web/images/backgrounds/background-1.jpg', 'loop' => true, 'muted' => true, 'autoplay' => true, 'overlay' => 'rgba(0,0,0,0.4)', 'mobileDisabled' => false, ],],Razpoložljive možnosti
| Možnost | Vrsta | Opis |
|---|---|---|
src | niz|matrika | Video pot (MP4). Uporabite niz s svetlimi/temnimi tipkami za videoposnetke, ki upoštevajo temo. |
poster | niz|matrika | Slika plakata, prikazana pred nalaganjem videoposnetka ali nadomestni mobilni napravi. |
loop | logično | Če je res, se video neprekinjeno ponavlja. |
muted | logično | Če je res, se videoposnetek predvaja brez zvoka. Zahtevano za samodejno predvajanje v večini brskalnikov. |
autoplay | logično | Če je res, se video začne samodejno predvajati ob nalaganju strani. |
playsinline | logično | Če je res, se video predvaja v mobilni napravi (ne v celozaslonskem načinu). |
overlay | niz | Izbirna barva prekrivanja za berljivost besedila. |
mobileDisabled | logično | Če je res, prikazuje sliko plakata na mobilniku namesto videa. |
Videoposnetki s temo
Tako kot slike so lahko tudi videoposnetki tematsko ozaveščeni. Uporabite niz s svetlimi/temnimi tipkami za serviranje različnih videoposnetkov glede na trenutno temo:
'src' => [ 'light' => '@web/videos/light-theme.mp4', 'dark' => '@web/videos/dark-theme.mp4',],