Video Player

Incorpora video nella pagina web

Il tag video HTML5 consente di incorporare video all’interno di una pagina web senza dover utilizzare plugin esterni. 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.

Il player viene istanziato automaticamente quando è presente l’attributo data-bs-video.

Esempio

<div class="row p-4">
  <video controls data-bs-video>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header " id="transcription-head1">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription1" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription1" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head1">
        <div class="accordion-body">
          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
        </div>
      </div>
    </div>
  </div>
</div>

Controllare il player con i data-attribute

Il player offre numerose opzioni di configurazione per personalizzare l’aspetto e il comportamento dello stesso. Una delle modalità per configurarlo consiste nell’utilizzare l’attributo data-setup definito all’interno del tag video avente come valore un array in formato JSON.

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.

<div class="row p-4">
  <video 
    data-bs-video 
    data-setup='{
      "controls": true,
      "autoplay": false, 
      "preload": "auto"
    }'
  >
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header " id="transcription-head3">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription3" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription3" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head3">
        <div class="accordion-body">
          Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis.
        </div>
      </div>
    </div>
  </div>
</div>

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.

<div class="row p-4">
  <video controls data-bs-video>
    <source src="https://italia.github.io/bootstrap-italia/docs/assets/video/ElephantsDream.mp4" type="video/mp4">
    <track 
      kind="captions" 
      src="./dist/assets/video/subtitles-it.vtt" 
      srclang="it" 
      label="Italiano" default>
  </video>
</div>

Streaming

Servire i 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.

<div class="row">
  <video 
    data-bs-video
    preload="auto"
    data-setup='{
      "controls": true,
      "autoplay": false,
      "fluid": true
    }'
  >
    <source src="https://italia.github.io/bootstrap-italia/docs/assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd" type="application/dash+xml">
    <track 
      kind="captions" 
      src="./dist/assets/video/subtitles-it.vtt" 
      srclang="it" 
      label="Italiano" default>
    <track 
      kind="chapters"
      src="./dist/assets/video/chapters-it.vtt" 
      srclang="it" 
      label="Italiano">
  </video>
</div>

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 l’utilizzo di questa funzionalità assieme al componente di accettazione del consenso per garantire la protezione della privacy degli utenti.

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.

Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube. Per far funzionare questi esempi nel proprio progetto occorre installare l’apposito plugin di Video.js importandolo come script.

<script src="https://cdn.unito.it/unito-theme/v3/js/Youtube.min.js"></script>

<div class="acceptoverlayable">
  <div class="acceptoverlay acceptoverlay-primary fade show">
    <div class="acceptoverlay-inner">
      <div class="acceptoverlay-icon">
        <svg class="icon icon-xl"><use href="./dist/svg/sprite.svg#it-video"></use></svg>
      </div>
        <p>Devi accettare i cookie di YouTube per abilitare la visione di questo contenuto. Scopri cosa sono i cookie e approfondisci i dettagli nella nostra <a href="#" class="text-white">cookie policy</a>.
        </p>
      <div class="acceptoverlay-buttons bg-dark">
        <div class="form-check">
          <input id="chk-remember" type="checkbox" data-bs-accept-remember>
          <label for="chk-remember">Ricorda la mia scelta</label>
        </div>
        <button type="button" class="btn btn-primary" data-bs-accept-from="youtube.com"
        onclick="loadYouTubeVideo('https://youtu.be/_0j7ZQ67KtY')">Accetta</button>
      </div>
    </div>
  </div>
  <div>
    <video controls data-bs-video id="vid1"
      class="video-js"
      width="640" height="264">
    </video>
  </div>
</div>

Plugin VideoJs

Esistono numerosi plugin disponibili per Video.js, che consentono di aggiungere nuove funzionalità, come la riproduzione di video in VR, l’analisi delle statistiche di visualizzazione del video, le utility per la UI mobile e molto altro ancora.