Lynda.com Design nettets HTML bakgrunnsvideo

• Kan 10, 2024

Bakgrunnsvideo er en fin måte å markedsføre produktet på, og i dette Lynda.com videoopplæringskurset Design nettet: HTML bakgrunnsvideo med Chris Converse vil du lære hvordan du legger til en bakgrunnsvideo for autospilling på hjemmesiden din. Du vil også lære hvordan du bruker CSS til å plassere andre designelementer over bakgrunnsvideoen. Og treningsfilene er gratis for selv Standard-medlemskapet.

Converse starter med en bare bein html-fil og bygger den viktigste div-beholderen for designelementene: teksttegnlinjen, logoen svg og videoen. Han demonstrerer hvordan man bruker autoplay i videomerkingen og hvordan han setter opp de to vanligste typene video, .mp4 og .ogg.

Deretter flytter Converse til CSS-filene og CSS for å style og plassere videoen og det sentrerte logobildet. Han fortsetter med å gjøre det samme for tagline-teksten. Jeg likte spesielt teknikken hans for å jobbe med grenser.

Converse diskuterer deretter hvordan du kan gjøre denne utformingen responsiv ved hjelp av mediesøk for mellomstore og små skjermer og CSS. Igjen setter han stiler for videoen, logoen og taggen. Han demonstrerer også hvordan du setter et erstatningsbilde for små skjermer som ikke kan spille av en video og skjule videoen.

For å gå videre til mer komplekse problemer, demonstrerer Converse hvordan du bruker JavaScript for å legge til mer kompleks kontroll over skjermen for funksjoner på mobile enheter, for eksempel berøringshendelser. Han introduserer et tredjeparts nettsted kalt Modernizr som vil generere CSS klasser som kan legges til siden via JavaScript basert på funksjonene til den nåværende enheten. Han demonstrerer hvordan du genererer koden, laster ned og legger den til på din webside-kode.

I den siste leksjonen demonstrerer Converse hvordan du kan kode posisjonen og andre stiler for oppsettet, slik at videoen dekker hele nettleservinduet.

Dette kurset handlet om HTML og CSS som ble brukt til å style og plassere en bakgrunnsvideo for nett- og mobile enheter. Imidlertid håpet jeg at forfatteren ville diskutere alternativer for hosting og optimalisering av videofilen for rask nedlasting. Det ville også være fint å vite hvordan du legger til interaktive designelementer over bakgrunnsvideoen i stedet for bare statiske elementer.

Chris Converse har en grad i grafisk design fra Rochester Institute of Technology og 22 års erfaring innen design og teknologi.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Offentliggjøring: Jeg ble ikke økonomisk kompensert for denne artikkelen. Meningene er helt mine egne basert på min erfaring.

Video Instruksjoner: How to stream live video on the internet--using 3+ cameras and Wirecast. (Kan 2024).