Vanlig problem for motion designere og videoredigerere som starter med nettsider: “Jeg laget en vakker animasjon i Adobe After Effects, rendret til .mov (i beste kvalitet!), lastet opp til WordPress… og ingenting. Svart skjerm, feil, eller filen veier 500 MB og laster i en time.”
Hvorfor skjer dette? Fordi internett opererer etter andre regler enn film-postproduksjon.
Problemet med .MOV filer
.mov formatet (QuickTime-container) er standard i kreativt arbeid, spesielt på Mac-er. Det bruker ofte ProRes kodek eller ukomprimert video. Flott for arkivering og videre redigering, men forferdelig for nettlesere.
- Ingen støtte: Ikke alle nettlesere (spesielt på Windows/Android) spiller QuickTime-kodeker av nativt.
- Størrelse: En ProRes-fil kan veie 1 GB per minutt. På internett sikter vi mot 5-10 MB.
Html5 standard: MP4 (h.264) og WebM
For at video skal fungere på 99,9% av enheter (fra iPhone til Android-kjøleskap), må du bruke web-standarder.
1. MP4 med h.264 kodek (avc)
Dette er “gullstandarden”. Det sikreste valget.
- Fungerer overalt.
- God kvalitet ved liten størrelse.
- Slik gjør du: I Adobe Media Encoder, velg H.264 format (ikke QuickTime!). Preset “YouTube 1080p Full HD” eller “Match Source - High Bitrate” er en god start.
2. WebM med vp9 kodek (eller av1)
Åpent format utviklet av Google.
- Ofte 30-50% mindre enn MP4 ved samme kvalitet.
- Ideell for moderne nettlesere (Chrome, Firefox).
”Video tag” strategi i html5
Best practice (hvis du må hoste video selv, f.eks. som Hero-bakgrunn) er å tilby begge formatene. Nettleseren velger det den foretrekker.
<video autoplay loop muted playsinline poster="thumbnail.jpg">
<source src="animasjon.webm" type="video/webm">
<source src="animasjon.mp4" type="video/mp4">
Nettleseren din støtter ikke video.
</video>Merk attributtene:
muted: Mobile nettlesere krever demping for å tillate autoavspilling.playsinline: Påkrevd på iOS (iPhone) slik at video ikke åpner i fullskjerm umiddelbart.
Eller kanskje YouTube / vimeo?
Hvis videoen din har lyd, varer lenger enn 30 sekunder og er innhold (f.eks. vlog, intervju), ikke last den opp til WordPress. Bruk YouTube eller Vimeo.
- Du sparer serverbåndbredde.
- Disse plattformene justerer automatisk kvaliteten til brukerens tilkobling (adaptiv strømming). WordPress kan ikke dette – det vil prøve å laste ned hele den store filen, og hakke på svak LTE.
Workflow-oppsummering
- Arbeid i After Effects/Premiere med høykvalitetsfiler (
.mov). - Eksporter for web gjennom Adobe Media Encoder som H.264 (.mp4).
- Hvis du vil være pro: konverter en kopi til WebM (f.eks. gratis HandBrake).
- Ved opplasting til WordPress mediebibliotek: hold filen under 10-20 MB. Hvis mer -> YouTube.
