Video Player
Componente Video Player.
Il tag video
HTML5 consente di incorporare video all’interno di una pagina web senza
dover utilizzare plugin esterni. Per gestire la riproduzione e l’interazione con l’utente,
è possibile utilizzare diverse librerie JavaScript.
Questo componente utilizza la libreria video.js per implementare funzionalità avanzate
come il supporto a diversi formati video, la personalizzazione dell’interfaccia utente
e l’integrazione con API esterne.
Come funziona
Il player viene istanziato automaticamente quando è presente l’attributo data-bs-video
.
Controllare il player con i data-attribute
Il player offre numerose opzioni di configurazione per personalizzare l’aspetto e
il comportamento del player stesso. Una delle modalità per configurare il player consiste
nell’utilizzare l’attributo data-setup
definito all’interno del tag video
avente come
valore un array in formato JSON.
<video controls data-bs-video data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
Importante!
Nota l’uso delle virgolette singole, data-setup
si aspetta di ricevere un JSON.
Per vedere tutte le opzioni disponibili, consultare la documentazione di VideoJS.
Controllare il player con JavaScript
Puoi anche controllare il player tramite javascript, di seguito un esempio.
const videoEl = document.getElementById("albatrosvideo");
const player = bootstrap.VideoPlayer.getOrCreateInstance(videoEl).player;
player.pause();
Per vedere tutte le opzioni disponibili, consultare la documentazione di VideoJS.
Sottotitoli, didascalie, capitoli e descrizioni
Tramite il tag track
puoi aggiungere del testo accessibile presente
in un file testuale; l’unico formato supportato è WebVTT.
Valorizzando opportunamente l’attributo kind
puoi specificare se
il file associato contiene i sottotitoli (trascrizione dei dialoghi),
le didascalie (trascrizione dei dialoghi, degli effetti sonori, trascrizione
del tipo di emozioni rappresentate dalla musica, ecc), i capitoli e/o la descrizione
generica del video.
Di seguito un esempio d’uso delle didascalie (kind="captions"
) in
diverse lingue.
Approfondisci l’argomento consultando la documentazione di VideoJS (Inglese)
Streaming
Servire video tramite dei file in formato mp4
o webm
(che sono i formati
più supportati) non è la migliore soluzione in termini di performance e di
ottimizzazione della banda.
Per garantire una buona esperienza utente è fondamentale scegliere il formato
di riproduzione più adatto. In questo contesto, i formati di streaming
HLS e DASH offrono importanti vantaggi rispetto al tradizionale file MP4.
L’uso dei formati di streaming permette una riproduzione fluida dei video online
grazie alla loro capacità di adattarsi alla larghezza di banda disponibile.
In questo modo si evitano interruzioni o rallentamenti durante la visualizzazione,
migliorando l’esperienza utente. Inoltre, questi formati consentono di distribuire
il contenuto su diverse piattaforme e dispositivi, aumentando la portabilità del video.
esempi
Embed da piattaforme terze
Oltre a consentire la riproduzione di video direttamente sulle proprie pagine web, il player video.js offre anche la possibilità di incorporare video provenienti da altre piattaforme come YouTube o Vimeo. Questa funzionalità consente di sfruttare i video già disponibili su queste piattaforme, senza doverli caricare sul proprio sito web. Tuttavia, è importante tenere in considerazione la questione della privacy: quando si incorporano video di terze parti, si può finire per condividere con queste piattaforme i dati degli utenti che visualizzano i video, come ad esempio le informazioni sulla navigazione o l’indirizzo IP. È quindi importante valutare attentamente l’utilizzo di questa funzionalità e bisogna adottare misure di protezione della privacy degli utenti.
esempi
Attivazione dell’overlay di consenso
L’utilizzo di un overlay per il consenso è una soluzione comune per garantire la conformità alla normativa sulla privacy in materia di cookie e tracciamento degli utenti. L’overlay per il consenso consente di informare l’utente sui cookie utilizzati e di ottenere il suo consenso in modo esplicito e consapevole alla riproduzione del video
esempi