Video sul sito, senza rallentarlo.

Quando un video serve davvero

Un video vale il suo peso quando mostra qualcosa che una foto non riesce a mostrare: un movimento, un procedimento, un posto attraversato, una persona che parla. Qualche esempio:

• il laboratorio o il cantiere al lavoro, per pochi secondi;
• come si usa un prodotto, o come si monta;
• il titolare che si presenta e dice per chi lavora;
• l’arrivo in una struttura, dal parcheggio alla camera.

Serve meno quando è solo decorazione: un video di sfondo con immagini generiche dietro al titolo pesa molto e dice poco. Se in cinque secondi non si capisce cosa mostra, meglio una foto.

YouTube o sul tuo sito?

Esiste anche la «modalità di privacy avanzata» di YouTube, con l’indirizzo youtube-nocookie.com: evita alcuni cookie al caricamento, ma non tutto, e manda comunque a Google l’indirizzo di chi guarda. Una soluzione più pulita, per i video di YouTube, è mostrare un’immagine con il pulsante play e caricare il lettore solo quando qualcuno lo tocca, dopo averlo avvisato.

Perché su iPhone certi video non partono

È il problema che sentiamo più spesso: «sul computer il video va, sul telefono no». Le cause sono quasi sempre tre:

1. Il video non è muto. Safari fa partire da solo un video solo se non ha audio o se è muto: è una regola di WebKit, il motore di Safari, pensata per non far partire suoni senza permesso.
2. Manca playsinline. Senza questo attributo, sull’iPhone il video si apre a tutto schermo invece di restare nella pagina.
3. Il server non lo manda a pezzi. Safari chiede i video un pezzo alla volta, e si aspetta una risposta speciale, la 206. Se il server risponde mandando il file intero, sul computer non ce ne accorgiamo, e sull’iPhone il video resta nero.

Il terzo l’abbiamo imparato su un sito con trentasei video: da allora, ogni sito con video lo controlliamo chiedendo al server un pezzo di file e verificando che risponda 206, sia in prova sia online.

Come si prepara un video per il web

• Corto. Fra i quindici secondi e il minuto per un video di pagina.
• Nella misura giusta. Larghezze fra 720 e 1.080 pixel bastano per quasi tutti gli schermi.
• Compresso in MP4 H.264, il formato che leggono tutti i browser, con i dati che servono per partire messi all’inizio del file: così comincia mentre si scarica ancora.
• Senza la traccia audio, se il video è muto: è peso che nessuno sentirà.
• Con un’immagine di anteprima, leggera, che compare subito al posto del video.
• Scaricato solo quando serve, quando arriva nello schermo, e fermato quando esce.
• Con un pulsante per fermarlo. Le linee guida per l’accessibilità chiedono che ciò che si muove per più di cinque secondi si possa mettere in pausa.

I sottotitoli

Se nel video si parla, servono i sottotitoli. Li usa chi non sente, chi guarda con l’audio spento, chi non capisce bene la lingua. Per il web si scrivono in un file di testo a parte, nel formato WebVTT, e il browser li mostra sopra il video. Sono anche un obbligo per i siti che devono essere accessibili: ne parliamo in Sito accessibile.

Video e Google

Da dicembre 2023 Google mostra un video nei risultati, con la sua anteprima, solo se è il contenuto principale della pagina: in alto, ben visibile, in una pagina fatta per guardarlo. In un articolo come questo, dove il video accompagna il testo, non aspettarti l’anteprima video su Google. Se un video lo vuoi far trovare, dagli una pagina sua, con un titolo, una descrizione e i dati strutturati che dicono a Google durata, anteprima e data.

Come li usiamo noi

In questo blog i video dei caroselli sono MP4 da 720 pixel, muti, con l’anteprima, e partono da soli quando li vedi, con il pulsante per fermarli. Il nostro server li manda a pezzi, come vuole l’iPhone. Sui siti che costruiamo vale lo stesso, e prima di pubblicare proviamo ogni video anche dal telefono.

Domande frequenti