Un vídeo de fons web no és un màster cinematogràfic. És una capa visual curta i silenciosa que ha de començar aviat, repetir amb netedat i deixar amplada de banda al contingut. Pujar l’original sol afegir resolució, taxa de bits, àudio i metadades innecessàries.
Prepara una còpia específica per al lliurament i conserva la font fora de Mitjans.
Definir la necessitat visual
Registra les dimensions renderitzades més grans, retall i durada. Un fitxer 4K costa justificar-lo dins d’un hero de 1400 píxels amb capa fosca.
Retalla fotogrames que ningú veu i crea un bucle curt sense salt perceptible. Si necessita 40 segons de narració, probablement és contingut i ha d’oferir controls.
Elimina l’àudio d’un fons decoratiu: autoplay sol exigir silenci i la pista continua sumant dades.
Crear un derivat MP4 controlat
FFmpeg pot generar H.264 compatible:
ffmpeg -i hero-master.mov
-vf "scale=1600:-2"
-c:v libx264
-preset slow
-crf 25
-an
-movflags +faststart
hero-web.mp4scale=1600:-2 limita l’amplada i calcula una alçada parella. Un CRF menor conserva més detall i sol pesar més. -an elimina l’àudio i +faststart mou les metadades al principi per reproduir abans de baixar-ho tot.
Són valors de prova, no universals. Text fi, degradats i moviment ràpid poden requerir altres ajustos.
Avaluar la qualitat al disseny
Mira el derivat en mòbil normal i escriptori amb el retall real. Busca blocs a les ombres, bandes i moviment entretallat. La capa del hero pot ocultar detall, així que jutja el resultat dins la pàgina.
Exporta dues o tres variants i tria la menor que continuï semblant intencionada. Conserva el màster amb còpia: recomprimir la còpia web acumula artefactes.
Preparar el pòster
Extreu o dissenya una imatge representativa amb la mateixa proporció i passa-la pel flux responsive normal. Ha de funcionar com a presentació permanent si el vídeo no es reprodueix.
Evita text promocional dins del vídeo o pòster quan pugui estar en HTML, on resulta accessible, indexable, editable i adaptable.
Reserva proporció o alçada mínima perquè el canvi de pòster a reproducció no desplaci la pàgina.
Verificar capçaleres i rangs
El servidor ha de respondre Content-Type: video/mp4 i, quan sigui compatible, acceptar sol·licituds parcials:
curl -I https://example.com/wp-content/uploads/hero-web.mp4Comprova estat correcte, tipus, longitud i Accept-Ranges: bytes. Els rangs permeten demanar parts sense reiniciar tota la transferència.
Si hi ha CDN, revisa la resposta pública i l’origen. Regles de seguretat o protecció anti-hotlink poden interferir.
Evitar processament i límits innecessaris
WordPress no genera mides de vídeo com fa amb imatges. El fitxer pujat sol ser el lliurat; comprimeix-lo abans en lloc d’esperar que un connector d’imatges ho faci.
No elevïs upload_max_filesize o post_max_size només per acceptar un màster inadequat. Un mitjà gran també encareix còpies, migracions i disc.
Per a molt trànsit o una biblioteca de vídeos pot convenir emmagatzematge d’objectes o streaming especialitzat. Un fons curt es pot servir localment si servidor i CDN responen bé.
Integrar sense forçar la baixada
Utilitza pòster, autoplay silenciat, playsinline i precàrrega conservadora. No precarreguis l’MP4 complet des de la capçalera. Considera servir només el pòster en pantalles petites o amb prefers-reduced-motion.
Inspecciona el marcat publicat: el constructor pot duplicar fonts o afegir un vídeo mòbil sense retirar el d’escriptori.
Provar la pàgina completa
Fes una visita freda amb dades mòbils. El pòster ha d’aparèixer aviat, el títol continuar llegible, el vídeo no bloquejar el CTA i el bucle no elevar massa la CPU.
Compara els bytes del mitjà amb CSS, fonts i imatge principal. Estalviar un 50 % no basta si encara es transfereixen diversos megabytes abans de poder actuar.
Si capçaleres, memòria cau CDN, constructor o fallback no són clars, una avaluació pot acotar la feina amb l’URL pública i especificacions de la font, sense contrasenyes inicialment.