HTML5 e Provider Personalizzati
Riproduci file video self-hosted direttamente nel tuo negozio e aggiungi il supporto per qualsiasi piattaforma video di terze parti oltre a YouTube e Vimeo.
Disponibile dalla v3.0.0
Panoramica
Product Video supporta due sorgenti video aggiuntive che vanno oltre le integrazioni integrate con YouTube e Vimeo:
I video HTML5 ti permettono di collegare direttamente file .mp4, .webm o .ogg ospitati ovunque un browser possa raggiungerli — il tuo server, una CDN o qualsiasi URL di file pubblico. Il browser gestisce la riproduzione nativamente tramite il suo player <video> integrato, senza alcun JavaScript di terze parti.
I provider personalizzati ti permettono di incorporare video da qualsiasi piattaforma o CDN che accetti un URL di incorporamento. Registri il provider una volta sola — assegnandogli un nome, il suo dominio e un tipo (file HTML5 o embed iframe) — e da quel momento il modulo riconosce gli URL di quel dominio e li incorpora correttamente su qualsiasi prodotto.
Entrambi i tipi di sorgente si integrano completamente con le posizioni di visualizzazione del modulo (galleria immagini, pannello laterale, schede, elenchi prodotti) e con i controlli di accesso esistenti, come la limitazione della riproduzione ai clienti registrati o a specifici gruppi di clienti.
Configurazione
Impostazioni HTML5
Vai su Moduli > Gestione moduli > Product Video > Configura, poi apri la scheda Impostazioni HTML5.
Tutte le impostazioni di questa scheda si applicano solo ai file video HTML5. YouTube e Vimeo non sono interessati.
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Dimensione copertina video | Qualsiasi preset di dimensione immagine definito nel tuo tema | medium | La dimensione dell'immagine prodotto usata come fotogramma poster mostrato prima che il video venga riprodotto. Scegli la dimensione che corrisponde all'immagine principale del prodotto nel tuo tema (spesso large o home_default). |
| Avvio automatico al caricamento del video | Abilitato / Disabilitato | Abilitato | Avvia la riproduzione automaticamente non appena il player viene reso sulla pagina. |
| Mostra i controlli video | Abilitato / Disabilitato | Abilitato | Visualizza la barra di controllo nativa del browser — play, pausa, avanzamento, volume e schermo intero. |
| Riproduci i video in muto | Abilitato / Disabilitato | Disabilitato | Riproduce senza audio per impostazione predefinita. La maggior parte dei browser richiede l'audio disattivato perché l'avvio automatico funzioni. |
| Riproduzione in loop | Abilitato / Disabilitato | Abilitato | Riavvia il video dall'inizio quando termina. |
Se abiliti Avvio automatico, devi abilitare anche Riproduci i video in muto. I browser moderni bloccano la riproduzione automatica con audio a meno che il video non sia in muto.
Provider Personalizzati
I provider personalizzati vengono gestiti da una pagina dedicata del Back Office, separata dalla configurazione principale del modulo.
Vai su Catalogo > Provider Video nella barra laterale del Back Office. Questa pagina elenca tutti i provider registrati, incluse le voci integrate di YouTube e Vimeo.
Clicca su Aggiungi nuovo provider per aprire il modulo del provider.
| Campo | Obbligatorio | Descrizione |
|---|---|---|
| Nome provider | Sì | Un'etichetta che scegli per tuo riferimento — ad esempio "Wistia", "Dailymotion" o "La mia CDN". I clienti non vedono mai questo nome. |
| Tipo provider | Sì | Video HTML 5 per URL diretti a file video; Altro iframe per piattaforme che usano iframe di incorporamento. |
| Dominio provider | Sì | Il dominio (senza http:// o https://) della piattaforma — ad esempio fast.wistia.net o cdn.miosito.com. Quando aggiungi un video a un prodotto, il modulo confronta l'URL con questo dominio per scegliere il provider corretto. |
| Miniatura provider | Sì (alla creazione) | Un'immagine miniatura predefinita usata per tutti i video di questo provider. Puoi sostituirla per singolo video quando aggiungi video ai prodotti. |
| Copertina video | Sì per il tipo HTML5 | Un'immagine di copertina predefinita (fotogramma poster) usata prima che un video HTML5 venga riprodotto. Si applica solo ai provider di tipo HTML5. |
Aggiungi solo provider iframe di cui ti fidi. Gli embed iframe di un provider registrato vengono resi senza filtri aggiuntivi.
Dopo il salvataggio, sei reindirizzato alla pagina di dettaglio del provider dove puoi aggiornare le immagini o modificare il nome e il dominio. I campi Nome provider e Dominio provider sono in sola lettura per le voci integrate di YouTube (ID 1) e Vimeo (ID 2).
Come Funziona
Riproduzione Video HTML5
Quando a un prodotto è assegnato un video HTML5, il modulo rende un elemento <video> nativo con l'URL come sorgente. Il fotogramma poster (l'immagine fissa mostrata prima della riproduzione) viene generato dall'immagine del prodotto usando il preset Dimensione copertina video configurato. Non viene caricato alcuno script player di terze parti — la riproduzione è gestita interamente dal browser.
Le impostazioni HTML5 (avvio automatico, controlli, muto, loop) si applicano a tutti i video HTML5 nel tuo negozio, inclusi i video assegnati tramite provider personalizzati impostati sul tipo HTML5.
I video HTML5 possono anche generare microdati Schema.org per la SEO. Quando un cliente riproduce un video HTML5, il modulo acquisisce i metadati del video e li memorizza per l'output dei dati strutturati. Questo richiede il Token Video HTML5 che si trova nella sezione Microdata e SEO della configurazione del modulo.
Incorporamento Provider Iframe
Per i provider personalizzati di tipo Altro iframe, il modulo racchiude l'URL del video in un tag <iframe> usando la larghezza e l'altezza video standard che hai configurato. L'URL che inserisci quando assegni un video a un prodotto deve essere l'URL di incorporamento diretto — non l'URL della pagina dove appare il video.
Ad esempio, per Wistia dovresti usare un URL come https://fast.wistia.net/embed/iframe/abc123, non l'URL della pagina di visione https://wistia.com/....
Corrispondenza del Dominio
Quando assegni un URL video a un prodotto, il modulo confronta il dominio dell'URL con tutti i domini dei provider registrati. La prima corrispondenza determina quale provider gestisce l'incorporamento. Se nessun provider personalizzato corrisponde, il modulo torna a verificare i domini di YouTube e Vimeo, poi tratta l'URL come un semplice file HTML5.
Immagini del Provider
Ogni provider può avere due immagini:
- Miniatura — usata nell'elenco provider del Back Office e come miniatura video di riserva per i video di quel provider che non hanno una miniatura caricata individualmente.
- Copertina — usata come fotogramma poster del video HTML5 per i provider di tipo HTML5, se non viene caricata una copertina individuale per un video specifico.
Le immagini vengono memorizzate in più dimensioni in base ai tipi di immagine configurati nel tuo negozio, così si rendono correttamente in tutte le dimensioni di visualizzazione.
Esempi d'Uso
Esempio: Aggiungere Wistia come provider iframe
Il tuo team marketing usa Wistia per demo di prodotti brandizzate. In Catalogo > Provider Video, clicca su Aggiungi nuovo provider. Imposta Nome provider su "Wistia", Tipo provider su "Altro iframe" e Dominio provider su fast.wistia.net. Carica un logo Wistia come miniatura. Salva. Ora quando aggiungi un video a un prodotto e incolli un URL di incorporamento Wistia, il modulo lo riconosce e rende l'iframe automaticamente.
Esempio: File MP4 self-hosted su una CDN
Il tuo negozio vende software con video tutorial memorizzati su videos.tuacdn.com. Aggiungi un provider personalizzato con Tipo provider impostato su "Video HTML5" e Dominio provider impostato su videos.tuacdn.com. Carica un'immagine di copertina rappresentativa. Quando assegni a un prodotto un URL video come https://videos.tuacdn.com/tutorial-prodotto-1.mp4, il modulo rende un player <video> nativo usando le tue impostazioni HTML5 (avvio automatico, loop, controlli, muto).
Esempio: Disabilitare l'avvio automatico per i video demo
Vendi prodotti fisici con video di sottofondo — vuoi che girino in loop in silenzio senza richiedere un clic. Vai su Impostazioni HTML5 e abilita Avvio automatico al caricamento del video, Riproduci i video in muto e Riproduzione in loop. Disabilita Mostra i controlli video se vuoi un aspetto pulito senza controlli. Tutti i video HTML5 nel tuo negozio inizieranno ora a riprodursi in silenzio al caricamento.
Note Importanti
- I provider personalizzati che aggiungi non possono essere eliminati se ci sono ancora video assegnati a prodotti che li usano. Rimuovi prima i video dai prodotti, poi elimina il provider.
- Le voci integrate dei provider YouTube (ID 1) e Vimeo (ID 2) non possono essere modificate o eliminate. Puoi caricare un'immagine miniatura personalizzata per sostituire le loro miniature generate automaticamente.
- Le miniature dei provider personalizzati non vengono generate automaticamente — devi caricare un'immagine durante la creazione del provider, o individualmente quando aggiungi video ai prodotti.
- Il comportamento dell'avvio automatico dei video HTML5 dipende dalle impostazioni del browser del cliente. Alcuni browser sovrascrivono l'avvio automatico con audio disattivato. Questa è una policy del browser, non una limitazione del modulo.
- Le intestazioni CORS sulla tua CDN video devono consentire il dominio del tuo negozio. Se la tua CDN non invia l'intestazione
Access-Control-Allow-Origincorretta, il video non verrà riprodotto cross-origin. Questo è un problema di configurazione del server al di fuori del controllo del modulo. - Se il tuo negozio funziona in modalità multi-shop, i provider personalizzati sono condivisi tra tutti i negozi — non sono limitati per singolo negozio.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| Il video HTML5 non si avvia automaticamente | Abilita Riproduci i video in muto nelle Impostazioni HTML5. I browser richiedono l'audio disattivato per l'avvio automatico. |
| L'immagine di copertina appare con dimensioni errate o è sfocata | Cambia Dimensione copertina video per corrispondere alla dimensione dell'immagine usata dal tuo tema per l'immagine principale del prodotto (di solito large o home_default). |
| Il video del provider personalizzato mostra un player vuoto o non funzionante | Verifica che l'URL sia l'URL di incorporamento diretto, non l'URL della pagina video. Per i provider iframe, l'URL deve essere l'endpoint incorporabile fornito dalla tua piattaforma. |
| Il video del provider personalizzato viene riprodotto ma non ha una miniatura | Le miniature per i provider personalizzati non vengono generate automaticamente. Carica un'immagine miniatura nella pagina di modifica del provider, o caricane una per singolo video nella pagina di modifica del prodotto. |
| Il file video sulla CDN non viene riprodotto | La tua CDN deve inviare intestazioni CORS che consentano il dominio del tuo negozio. Contatta il tuo provider CDN per abilitare Access-Control-Allow-Origin per il tuo negozio. |
| Il campo dominio provider è disattivato | I provider integrati YouTube e Vimeo (ID 1 e 2) hanno campi in sola lettura. Non puoi cambiare il loro dominio o nome — solo le immagini miniatura. |
Domande Frequenti
Posso usare provider personalizzati insieme a YouTube e Vimeo sullo stesso prodotto?
Sì. Un singolo prodotto può avere video da qualsiasi combinazione di provider — YouTube, Vimeo, HTML5 e qualsiasi provider personalizzato registrato. Ogni video viene incorporato seguendo le regole del proprio provider.
Quale URL devo incollare quando aggiungo un video da un provider iframe a un prodotto?
Usa l'URL di incorporamento diretto — quello che normalmente inseriresti in un tag <iframe src="...">. Non usare l'URL della pagina dove guardi il video. La maggior parte delle piattaforme fornisce un'opzione dedicata "URL di incorporamento" o "condividi incorporamento". Ad esempio, Wistia mostra un URL fast.wistia.net/embed/... nelle sue opzioni di incorporamento.
I video HTML5 generano dati strutturati Schema.org come YouTube e Vimeo?
Sì, ma richiede un passaggio aggiuntivo. Abilita la generazione di microdati nella sezione Microdata e SEO e assicurati che il Token Video HTML5 sia impostato. Il modulo acquisisce i metadati del video quando un cliente riproduce il video e li memorizza per l'output Schema.org. I metadati di YouTube e Vimeo vengono recuperati dalle loro API; i metadati HTML5 vengono acquisiti tramite un meccanismo front-end attivato alla prima riproduzione.
I miei clienti su mobile vedranno i controlli del player HTML5?
Il browser rende i controlli usando la sua interfaccia video nativa, quindi l'aspetto dipende dal browser e dal dispositivo del cliente. Sulla maggior parte dei browser mobile, i controlli appaiono come una sovrapposizione sul video. Puoi nascondere completamente i controlli disabilitando Mostra i controlli video nelle Impostazioni HTML5 — utile per video di sottofondo o ambientali.
Come posso rimuovere un provider personalizzato che non uso più?
Prima rimuovi tutti i video assegnati a prodotti che usano quel provider. Poi vai su Catalogo > Provider Video, apri il provider ed eliminalo. Se ci sono ancora video di quel provider assegnati a prodotti, l'eliminazione fallirà.
È possibile pre-compilare automaticamente il nome del provider dal dominio?
Se apri il modulo Aggiungi Provider senza digitare un nome ma con un dominio già nel campo dominio, il modulo genera automaticamente un nome provider rimuovendo i suffissi comuni (.com, .net, ecc.) dal dominio e scrivendolo con la maiuscola. Puoi modificare il nome in qualsiasi momento.