Veebilehe taustavideo: maht, vorming, kordus ja automaatesitus iPhone'is

Hea veebilehe taustavideo on lühike, helita ja märkamatu korduskohaga: 6-12 sekundit, H.264 MP4 ning soovi korral WebM, ligikaudu 2-4 Mbit/s, ilma heliribata, koos avapildi ja atribuutidega autoplay muted loop playsinline. Nii käivitub video iPhone'is automaatselt, jääb mahult umbes 5 MB piiresse ja kuvab avapildi enne esimese kaadri laadimist.

Taustavideo peamised seaded

Need on praktilised lähteväärtused, mitte standard. Peened detailid, näiteks pritsmed või filmiteralisus, vajavad suuremat bitikiirust; udu ja gradiendid väiksemat.

Taustavideo maht: arvutus

Korruta bitikiirus kestusega. Megabaitide leidmiseks jaga saadud megabittide arv 8-ga.

10-sekundiline video bitikiirusega 2 Mbit/s on 20 megabitti ehk umbes 2,5 MB. Kui lühendad selle 6 sekundini ja kasutad bitikiirust 3 Mbit/s, on maht ligikaudu 2,25 MB.

Kas sulle anti avavaate jaoks 45 MB fail? Aitab lühem video mõistliku bitikiirusega, mitte parem CDN. Mobiilis sihime 720p juures mahtu 1,5-3 MB.

Video on ka GIF-ist märgatavalt väiksem: web.devi enda näites sai 3,7 MB GIF-ist 551 KB MP4 ja 341 KB WebM.

Muuda taustavideo korduskoht märkamatuks

Viimane kaader peab sujuvalt esimeseks üle minema. Vali tsükliline liikumine, näiteks hõljuv suits või toote aeglane pöörlemine, ja kontrolli ühenduskohta enne eksporti. Töövõtted ja kontrolli leiad juhendist kuidas teha tehisintellektiga märkamatu korduskohaga video.

Taustavideo ei mängi iPhone'is? Kontrolli neid viit asja

WebKiti iOS-i videoreeglid lubavad videot puudutuseta automaatselt esitada ainult siis, kui heli on vaigistatud või heliriba puudub. Lehe sees mängimiseks on vaja atribuuti playsinline. Enamasti on põhjus üks järgmistest:

1. Puudub muted või playsinline. Mõlemad on vajalikud. Ilma playsinline-atribuudita püüab iPhone avada video täisekraanil.
2. Skript lülitab heliriba heli sisse. WebKit peatab video, kui heli tekib kasutaja tegevuseta. Eemalda heliriba eksportimisel.
3. Element on peidetud. Videod, millel on display: none või visibility: hidden või mis on nähtavalt alalt välja keritud, ei käivitu automaatselt või peatuvad.
4. Energiasäästurežiim. iOS võib selles režiimis automaatesituse täielikult blokeerida. WebKiti veajälgijas on ammu avatud teade „Energiasäästurežiim keelab video automaatesituse”. Seda piirangut ei saa tühistada, seega peab avapilt ka üksi hästi mõjuma.
5. Server ei toeta baitvahemike päringuid. Safari küsib videot osade kaupa. Enamik CDN-e toetab seda, kuid mõned CMS-i failipäringu aadressid mitte.

Koodinäide, millest alustame

<section class="hero">
  <video id="hero-video" autoplay muted loop playsinline
         preload="auto" poster="/media/hero-poster.webp"
         aria-hidden="true">
    <source src="/media/hero-loop.webm" type="video/webm">
    <source src="/media/hero-loop.mp4" type="video/mp4">
  </video>
  <button id="hero-toggle" type="button">Peata taustavideo</button>
</section>

<script>
  const v = document.getElementById('hero-video');
  const btn = document.getElementById('hero-toggle');
  const reduce = matchMedia('(prefers-reduced-motion: reduce)');

  function setPaused(paused) {
    paused ? v.pause() : v.play().catch(() => {});
    btn.textContent = paused ? 'Esita taustavideo' : 'Peata taustavideo';
  }

  btn.addEventListener('click', () => setPaused(!v.paused));

  if (reduce.matches) {
    setPaused(true);                          // respect the OS setting
  } else {
    v.play().catch(() => setPaused(true));    // e.g. Low Power Mode: poster stays
  }
</script>

Brauser valib esimese toetatud <source>-elemendi, mistõttu on WebM esimesel kohal (web.dev). Kui vanemates iPhone'ides tekib probleeme, pane MP4 esimeseks.

MP4 jaoks eemaldab käsk nagu ffmpeg -i master.mov -an -c:v libx264 -pix_fmt yuv420p -b:v 3M -maxrate 4M -bufsize 6M -movflags +faststart hero-loop.mp4 heli (-an), piirab bitikiirust ja tõstab indeksi faili algusesse, et esitus algaks enne faili täielikku allalaadimist.

Jõudlus ja ligipääsetavus

LCP. Video puhul arvestab Google Largest Contentful Painti kandidaadina avapilti või esimest kaadrit olenevalt sellest, kumb ilmub varem. Hea LCP on kuni 2,5 s (web.dev). Väike eellaaditud avapilt on kõige lihtsam viis videoga avavaate LCP parandamiseks. Liikumise ja kiiruse seost käsitleme lähemalt artiklis kas animatsioonid aeglustavad veebilehti.

Pausinupp. WCAG 2.2 edukriteerium 2.2.2 tasemel A nõuab võimalust pausile panna, peatada või peita liikuv sisu, mis käivitub automaatselt, kestab üle viie sekundi ja asub muu sisu kõrval. Lõputult korduv avavideo vastab neile tingimustele, seega on näites olev nupp kohustuslik.

Vähendatud liikumine. Arvesta eelistusega prefers-reduced-motion ja näita video asemel avapilti. Rohkem võtteid leiad meie ligipääsetava veebianimatsiooni juhendist.

Majutus. 3 MB korduva video puhul on pika vahemäluajaga tavaline fail CDN-is parem kui videoplatvormilt manustamine või lehekoostaja meediatöötlus.