Naar inhoud
FFrosthaven Lab

16 — 10 varianten

Video

Bewegend beeld als bouwsteen: video-heroes, tekstmaskers, scroll-scrub, hover-cards, lightbox en duotone. Inclusief het performance-budget.

Video-hero met poster

videohero

property care · marina alta

Uw huis, het hele jaar in orde

De vier attributen zijn niet optioneel: autoPlay, muted, loop, playsInline. Zonder muted weigert elke browser autoplay, zonder playsInline gaat iOS fullscreen. De poster is je LCP-element, niet de video: preload die, en houd het bestand onder 200 kB.

Video als tekstmasker

videocss

DÉNIA

De letters zijn een venster op de video. Truc: een zwart vlak over de video met mix-blend-multiply en witte tekst erin. Zwart maal video is zwart, wit maal video is de video. Werkt in elke moderne browser en heeft geen SVG-mask nodig.

Split met videokolom

videoconversie

sinds 2011

Zie het werk, niet de belofte

De split hero, maar de beeldkolom is bewegend beeld. Sterker dan een foto zodra de klant echt materiaal heeft van het werk. Zelfde zes eisen als de gewone split: kolom bloedt naar de rand, asymmetrisch, volle hoogte.

Scroll-scrub video

videoscroll

scroll de pagina · frame volgt

De scrollpositie stuurt currentTime aan: de video speelt niet, je spoelt hem. Cinematisch effect uit de awardhoek. Vereist een kort, laag-bitrate bestand met veel keyframes, anders hapert het spoelen. Scroll de pagina.

Video-cards met hover-play

videoportfolio
aurora
ember
smoke

Poster staat stil, de clip start pas bij hover. Zo laad je negen projecten zonder negen video's tegelijk af te spelen. Op touch speelt niets: zorg dat de poster het verhaal al vertelt.

Video-lightbox

videojs

Kleine play-knop op een stille achtergrondvideo, klik opent de clip met geluid. De enige plek waar geluid mag: na een expliciete klik. Automatisch geluid is de snelste manier om iemand weg te jagen.

Video-curtain onthulling

videotransitie

Kolommen schuiven weg en onthullen de video eronder. Als intro-animatie of bij een route-wissel. Klik op de knop. Houd het onder 800 ms, anders wacht de bezoeker.

Video-marquee

videocss
aurora
ember
smoke
aurora
ember
smoke

Doorlopende band met clips. Voor een showreel of een projectenrij zonder dat de bezoeker hoeft te klikken. Maximaal drie unieke bestanden, daarna herhalen: niemand ziet het verschil, de bandbreedte wel.

Video met duotone-overlay

videokleur

Eén merk, drie clips

Twee merkkleuren over willekeurige footage leggen. Redt beeldmateriaal dat kleurtechnisch nergens op slaat, en maakt van drie verschillende clips één samenhangende reeks. De goedkoopste manier om video 'on brand' te krijgen.

Video-budget en fallbacks

performanceverplicht

Poster verplicht

die is de LCP, niet de video

preload=metadata

nooit auto bij meerdere clips

Eén autoplay per scherm

de rest op hover of klik

Geen geluid zonder klik

muted is een autoplay-voorwaarde

Video is de zwaarste bouwsteen die je in een klantsite zet. Vier regels: poster verplicht en preload='metadata' (nooit 'auto'), hoogstens één automatisch spelende clip per scherm, pauzeren zodra hij uit beeld is, en onder prefers-reduced-motion helemaal niet spelen maar alleen de poster tonen. De clips in dit lab zijn met ffmpeg gegenereerd en samen 400 kB; dat is de orde van grootte waar je naartoe wilt.