Utilizzo dei video

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni dei video
2. Documentazione di Company XYZ sulle impostazioni degli sfondi delle sezioni
3. Documentazione di Shopify sul caricamento e la gestione dei file
4. Documentazione di Shopify sull'aggiunta di contenuti multimediali ai prodotti
5. Documentazione di Shopify sull'accessibilità dei temi

Video utili

Video della Shopify Academy: personalizzazione del tuo negozio

Video della Shopify Academy: personalizzazione del tuo negozio

Align supporta i video in aree multimediali autonome, sfondi di sezioni e banner, gallerie di prodotti, presentazioni, promozioni nella navigazione e layout con contenuti misti. La maggior parte delle posizioni utilizza gli stessi controlli principali per sorgente video, inquadratura, riproduzione, poster e sovrapposizioni, anche se le etichette delle impostazioni possono variare in base al contesto.

Utilizza questa guida per preparare i video e scegliere impostazioni pratiche nel tuo negozio Shopify. Per informazioni specifiche sulle impostazioni, consulta Impostazioni video e Impostazioni dello sfondo sezione.

Scegli una sorgente video

La maggior parte delle aree video di Align supporta uno dei tre tipi di sorgente seguenti.

1. Video ospitato da Shopify
   1. Carica o seleziona un file dai file del tuo negozio Shopify.
   2. Utilizza questa opzione quando hai bisogno di controllare codifica, ripetizione, dimensione del file o riproduzione in stile sfondo.
   3. Il video di sfondo ospitato è obbligatorio per i trattamenti di sfondo di sezioni, banner ed hero.
2. YouTube
   1. Incolla l’URL della pagina del video, non il codice di incorporamento.
   2. Utilizza YouTube quando il video è già presente lì e l’hosting del provider soddisfa le tue esigenze.
3. Vimeo
   1. Incolla l’URL della pagina del video, non il codice di incorporamento.
   2. Utilizza Vimeo quando il video è già presente lì e l’hosting del provider soddisfa le tue esigenze.

Per i passaggi di caricamento dei file, consulta la documentazione di Shopify sul caricamento e la gestione dei file

Utilizza una sola sorgente per ogni area video. Se sono disponibili sia un file ospitato sia un URL di servizio, il file ospitato ha la precedenza. Cancella la sorgente inutilizzata per evitare ambiguità. Potrebbe essere necessario salvare le modifiche ai video esterni prima che l’anteprima nell’editor del tema Shopify corrisponda alla vetrina.

Consiglio

I video esterni caricano prima il poster. Il player completo viene caricato solo dopo un’interazione o quando un video con riproduzione automatica diventa visibile.

Prepara i file video ospitati

Il peso del file influisce direttamente sui tempi di caricamento, soprattutto sui dispositivi mobili. Shopify distribuisce i video ospitati con lo streaming adattivo (HLS), ma codificare con un bitrate inferiore può comunque migliorare PageSpeed e le prestazioni percepite. I file sorgente più piccoli restano importanti anche quando lo streaming è disponibile.

Comprendi il bitrate

Il bitrate è la quantità di dati video codificati ogni secondo.

1. Un bitrate più elevato offre movimento e dettagli più nitidi, ma crea file più grandi e aumenta il peso della pagina.
2. Un bitrate più basso crea file più leggeri che si avviano più rapidamente, ma può ridurre i dettagli nelle scene con movimenti rapidi o scure.

La maggior parte dei codificatori mostra il bitrate in kbps o Mbps. Consideralo un equilibrio tra resa visiva e prestazioni, non come un’unica impostazione di qualità massima.

Inizia con questi obiettivi di codifica

1. Uso generale — Utilizza circa 2500 kbps per video autonomi, clip hero, contenuti multimediali dei prodotti e sfondi di sezioni a larghezza completa.
2. Posizioni piccole o compatte — Utilizza circa 1000–1500 kbps per promozioni nei menu, banner di ricerca, contenuti multimediali nel piè di pagina, riquadri collage e altri fotogrammi stretti.
3. Clip di sfondo e ambientali — Mantieni i file brevi, adatti alla ripetizione e visivamente semplici. Questi video vengono generalmente riprodotti automaticamente senza audio e devono risultare leggeri, non cinematografici.

Abbina la risoluzione alle dimensioni con cui viene visualizzato il video. Un master 1080p o 4K mostrato in un piccolo banner aggiunge banda senza migliorare il risultato visibile.

Le superfici con riproduzione automatica, inclusi sfondi, video nelle presentazioni e clip hero in evidenza, sono particolarmente sensibili alle prestazioni. Utilizza clip brevi, riproduzione senza audio e bitrate contenuti.

Utilizza i video in posizioni diverse

Gli stessi concetti relativi ai video si applicano a molte posizioni dell’editor Align. Questi gruppi descrivono ruoli comuni e non ogni singola sezione.

1. Aree video autonome
   1. Includono sezioni video dedicate e blocchi video nei layout con contenuti misti.
   2. Supportano sorgenti ospitate, YouTube e Vimeo.
   3. Sono adatte a dimostrazioni, storie del brand, spiegazioni e contenuti editoriali con didascalie e pulsanti facoltativi.
2. Sfondi di sezioni e banner
   1. Aggiungono movimento decorativo dietro titoli, banner, elementi hero e contenuti promozionali.
   2. Utilizzano solo file ospitati.
   3. In genere si riproducono automaticamente senza audio, si ripetono e nascondono i controlli.
   4. Possono supportare file di sfondo desktop e mobile separati quando le dimensioni dello schermo richiedono ritagli diversi.
3. Immagini dei prodotti
   1. Includono video nella galleria dei prodotti nelle pagine prodotto e nelle aree prodotto in evidenza.
   2. Possono includere un video al passaggio del mouse facoltativo nelle schede prodotto quando i contenuti multimediali al passaggio del mouse sono abilitati.
   3. I fotogrammi poster e i controlli di riproduzione sono particolarmente utili in questo caso, perché gli acquirenti si aspettano una riproduzione intenzionale.
4. Contenuti multimediali di presentazioni e caroselli
   1. Un video può sostituire o sovrascrivere le immagini di una diapositiva.
   2. Le clip in genere si riproducono automaticamente quando la diapositiva diventa attiva, quindi mantienile abbastanza brevi da risultare intenzionali nella sequenza.
5. Superfici promozionali compatte
   1. Includono piccole posizioni in stile banner nella navigazione, nella ricerca e in altre aree ad alta densità.
   2. Queste posizioni sono le più sensibili a bitrate elevati e file di grandi dimensioni.

Per i passaggi di caricamento della galleria prodotto e i tipi di contenuti multimediali supportati, consulta la documentazione di Shopify sull’aggiunta di contenuti multimediali ai prodotti

Quando un video sembra pesante, controlla prima la sua posizione. Un file adatto a un elemento hero a larghezza completa potrebbe essere comunque troppo grande per un banner del menu o un fotogramma delle dimensioni di una scheda.

Configura la riproduzione

Questi controlli compaiono nelle sezioni video, nei blocchi video e in altre superfici Align basate sui contenuti multimediali.

1. Riproduzione automatica
   1. Avvia la riproduzione quando il video entra nell’area visibile e la mette in pausa quando il video esce dall’area visibile.
   2. È ideale per brevi clip ambientali che supportano i contenuti vicini.
   3. Richiede la riproduzione senza audio durante il normale utilizzo della vetrina.
2. Ripeti
   1. Ripete continuamente la clip.
   2. È adatto agli sfondi e ai brevi accenti di movimento, ma può distrarre dai video narrati o basati su una storia.
3. Disattiva audio
   1. Mantiene l’audio disattivato finché l’acquirente non lo abilita tramite i controlli del player.
   2. I video con riproduzione automatica sono disattivati per impostazione predefinita.
4. Mostra i controlli del player video
   1. Mostra i controlli nativi o del provider per riproduzione, pausa, ricerca, volume e schermo intero, quando supportati.
   2. Mantieni visibili i controlli per spiegazioni, dimostrazioni e video che gli acquirenti potrebbero voler riprodurre nuovamente o esaminare da vicino.
   3. Puoi nascondere i controlli per le clip decorative. Su molte superfici, l’interazione tramite clic e tastiera continua a funzionare quando i controlli sono nascosti.

Nota

Se un video dipende da dettagli parlati, disattiva la riproduzione automatica e mantieni visibili i controlli, così gli acquirenti possono scegliere quando ascoltare.

Imposta poster, rapporto d’aspetto e larghezza

1. Immagine poster
   1. Fornisce un fotogramma di anteprima facoltativo prima dell’inizio della riproduzione.
   2. È particolarmente utile per i video ospitati e per ottenere una prima impressione curata.
   3. I video esterni utilizzano le miniature del provider quando non è impostato un poster personalizzato.
2. Rapporto d’aspetto
   1. Controlla la forma del fotogramma visibile su desktop e, quando disponibile, su dispositivi mobili.
   2. Utilizza Default quando le dimensioni della sorgente sono già adatte al layout.
   3. Imposta un rapporto mobile separato solo quando i telefoni richiedono un ritaglio diverso.
3. Larghezza massima
   1. Impedisce al video di estendersi oltre la larghezza prevista all’interno di un’area di contenuto.
   2. Un valore pari a 0 utilizza tutta la larghezza disponibile.

Scegli un poster che corrisponda il più possibile al ritaglio del video. In questo modo la transizione è più fluida quando inizia la riproduzione.

Aggiungi sovrapposizioni e riproduzione senza controlli

Molte aree video supportano una sovrapposizione di colore o sfumatura e un’impostazione Stile sovrapposizione.

1. Mostra quando in pausa
   1. Mostra la sovrapposizione prima della riproduzione e dopo che un acquirente mette in pausa il video.
   2. Mantiene la riproduzione visivamente pulita mentre il video è in esecuzione.
   3. Le pause automatiche nella finestra visibile sui video con riproduzione automatica non vengono considerate pause dell’acquirente.
   4. Questa è l’impostazione default per molte superfici video.
2. Mostra sempre
   1. Mantiene la sovrapposizione visibile sia sul poster sia sul video in riproduzione.
   2. Utilizzala quando la tinta fa parte del design, ad esempio in un trattamento editoriale o del brand.
   3. Questa opzione disattiva forzatamente i controlli, indipendentemente da Mostra i controlli del player video.

Quando i controlli sono nascosti, molti video ospitati e Vimeo possono comunque avviarsi dal poster, quindi essere messi in pausa o riprodotti nuovamente tramite clic o interazione da tastiera. YouTube mantiene il proprio comando di riproduzione gestito dal provider invece di aggiungere una seconda icona di riproduzione del tema.

Utilizza sovrapposizioni con un contrasto elevato per il testo. Consulta Impostazioni dello sfondo sezione quando il video appare dietro titoli, pulsanti o testo del corpo. Per indicazioni più generali, consulta la documentazione di Shopify sull’accessibilità dei temi

Comprendi il comportamento integrato delle prestazioni

Align contribuisce a mantenere i video curati senza caricare immediatamente ogni player.

1. Caricamento poster-first
   1. I video esterni mostrano un poster prima di creare il player attivo.
   2. I video senza riproduzione automatica attendono l’interazione prima di caricare l’incorporamento completo.
2. Riproduzione automatica consapevole dell’area visibile
   1. Quando possibile, i player con riproduzione automatica rimandano la creazione finché il video non entra nell’area visibile.
   2. La riproduzione automatica si interrompe quando il video esce dall’area visibile.
3. Impostazioni predefinite più leggere per i video ospitati
   1. I video ospitati senza riproduzione automatica evitano il precaricamento immediato.
   2. I video di sfondo rimandano il caricamento della sorgente quando appropriato e utilizzano poster con immagini di anteprima quando disponibili.
4. Aggiornamenti affidabili
   1. Il comportamento dei video viene reimpostato dopo gli aggiornamenti della griglia e i ricaricamenti dell’editor, evitando player obsoleti dopo gli aggiornamenti.
5. Coordinamento delle schede prodotto
   1. Quando una scheda prodotto ha sia un video principale sia un video al passaggio del mouse, viene riprodotta una sola clip alla volta.

Questi comportamenti sono automatici. I principali controlli sulle prestazioni sono il peso del file, la posizione, la scelta della riproduzione automatica e la durata della clip.

Scenari di esempio

1. Ripetizione dello sfondo hero
   1. Utilizza una clip ambientale ospitata di 6–10 secondi, codificata a circa 2500 kbps o meno.
   2. Mantienila senza audio e in ripetizione, rafforza la sovrapposizione per il testo e aggiungi un file specifico per dispositivi mobili solo se il ritaglio desktop non funziona sui telefoni.
2. Video dimostrativo del prodotto
   1. Utilizza un video ospitato o un URL di servizio con controlli visibili, riproduzione automatica disattivata e un fotogramma poster personalizzato.
   2. Scegli un rapporto panoramico o predefinito che corrisponda al layout della galleria.
3. Banner promozionale nella navigazione
   1. Utilizza una clip ospitata compatta, codificata a circa 1000–1500 kbps.
   2. Mantieni semplice il movimento, evita la narrazione e verifica le prestazioni sui dispositivi mobili, perché il fotogramma visibile è piccolo.
4. Video editoriale con tinta
   1. Utilizza lo stile di sovrapposizione Mostra sempre quando una velatura di colore fa parte del design.
   2. Mantieni breve la clip e verifica che il contrasto del testo resti elevato durante la riproduzione.
5. Spiegazione esterna
   1. Utilizza un URL di una pagina YouTube o Vimeo con riproduzione automatica disattivata, controlli attivati e un poster personalizzato se il ritaglio della miniatura predefinita non è efficace.
   2. Lascia che il caricamento poster-first supporti le prestazioni mentre gli acquirenti decidono se premere il pulsante di riproduzione.

Note sull’uso

1. Codifica prima del caricamento. Il bitrate e la risoluzione sono più importanti che affidarsi esclusivamente allo streaming.
2. Utilizza file ospitati per gli sfondi. YouTube e Vimeo funzionano per contenuti multimediali autonomi e basati su blocchi, non per trattamenti di sfondo decorativi.
3. Mantieni brevi gli sfondi in movimento. I video di sfondo e delle presentazioni devono comunicare chiaramente senza audio né richiedere attenzione.
4. Controlla separatamente i dispositivi mobili. File di sfondo, rapporti d’aspetto e sovrapposizioni possono comportarsi diversamente sugli schermi più piccoli.
5. Visualizza l’anteprima dopo il salvataggio. Le modifiche ai video esterni potrebbero non apparire completamente nell’editor finché non salvi e visualizzi la vetrina.