Video Player

Componente Video Player.

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.

Accessibilità

Le persone che utilizzano le tecnologie assistive possono agevolmente accedere ai comandi di questo player video, tuttavia per rendere accessibile un contenuto video è necessario soddisfare i Criteri di Successo contenuti nelle linee guida 1.2 Media temporizzati delle WCAG (versione corrente). In particolare:

Se il contenuto è costituito da “solo video” oppure “solo audio”, è necessario fornire una trascrizione (Criterio di Successo 1.2.1)
Fornire sempre sottotitoli (Criterio di Successo 1.2.2).
Fornire audio descrizioni quando sono presenti scene o contenuti non descritte dalla traccia audio primaria. (Criteri di Successo 1.2.3 e 1.2.5)

Come funziona

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="row">
  <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.

<div class="row">
  <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>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header no_toc" id="transcription-head2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription2" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription2" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head2">
        <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>

Importante!

Nota l’uso delle virgolette singole, data-setup si aspetta di ricevere un JSON.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="row">
  <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>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="row">
  <video controls data-bs-video>
    <source src="/bootstrap-lombardia/docs/assets/video/ElephantsDream.mp4" type="video/mp4">
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-it.vtt" 
      srclang="it" 
      label="Italiano" default>
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-en.vtt" 
      srclang="en" 
      label="English">
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-es.vtt" 
      srclang="es" 
      label="Español">
  </video>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header " id="transcription-head4">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription4" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription4" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head4">
        <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>

Approfondisci l’argomento consultando la documentazione di VideoJS (Inglese)

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.

Tip

FFmpeg è uno strumento di conversione multimediale open-source che consente di convertire facilmente i file MP4 in formati adattivi come HLS o DASH, ti permette la conversione del video MP4 in un formato a bitrate variabile per adattare la qualità del video alle diverse velocità di connessione degli utenti. Approfondisci su FFmpeg

Di seguito un esempio in formato MPEG-DASH

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="row">
  <video 
    data-bs-video
    poster="/bootstrap-lombardia/docs/assets/video/ElephantsDream.mp4-poster16.gif"
    preload="auto"
    data-setup='{
      "controls": true,
      "autoplay": false,
      "fluid": true
    }'
  >
    <source src="/bootstrap-lombardia/docs/assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd" type="application/dash+xml">
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-it.vtt" 
      srclang="it" 
      label="Italiano" default>
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-en.vtt" 
      srclang="en" 
      label="English">
    <track 
      kind="captions" 
      src="/bootstrap-lombardia/docs/assets/video/subtitles-es.vtt" 
      srclang="es" 
      label="Español">
    <track 
      kind="chapters"
      src="/bootstrap-lombardia/docs/assets/video/chapters-en.vtt" 
      srclang="en" 
      label="English">
    <track 
      kind="chapters"
      src="/bootstrap-lombardia/docs/assets/video/chapters-es.vtt" 
      srclang="es" 
      label="Español">
    <track 
      kind="chapters"
      src="/bootstrap-lombardia/docs/assets/video/chapters-it.vtt" 
      srclang="it" 
      label="Italiano" default>
  </video>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header " id="transcription-head6">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription6" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription6" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head6">
        <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>

Le playlist HLS e DASH possono essere riprodotte su più domini condividendo solo l’URL. Tuttavia, a causa delle restrizioni imposte dalle politiche di sicurezza del browser, l’utilizzo di queste playlist in domini diversi da quello originale può causare errori CORS (Cross-Origin Resource Sharing). In altre parole, il browser può rifiutare l’accesso alle risorse audio e video, impedendo la corretta riproduzione del contenuto multimediale.

Per superare questo problema, è necessario configurare correttamente il server che fornisce le risorse audio e video, consentendo l’accesso a domini esterni tramite le policy CORS.

Gestire più tracce audio

L’uso di più tracce audio nei video è una buona tecnica per migliorare l’accessibilità dei contenuti multimediali. Ad esempio, è possibile creare una traccia audio aggiuntiva che descrive in dettaglio le immagini e le azioni che si svolgono nel video, per aiutare le persone non vedenti a comprendere il contenuto visivo. Inoltre, l’aggiunta di tracce audio in lingue diverse consente di offrire il video in più lingue.

Di seguito un esempio in formato HLS multilingua.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="row">
  <video
    data-bs-video
    poster="/bootstrap-lombardia/docs/assets/video/ElephantsDream.mp4-poster21.jpg"
    preload="auto"
    data-setup='{
      "controls": true,
      "autoplay": false,
      "fluid": true
    }'
  >
    <source src="/bootstrap-lombardia/docs/assets/video/ElephantsDreamHLS/ElephantsDream.mp4.m3u8" type="application/x-mpegURL">
  </video>
  <div class="vjs-transcription accordion">
    <div class="accordion-item">
      <h2 class="accordion-header " id="transcription-head7">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription7" aria-expanded="true" aria-controls="transcription">
          Trascrizione
        </button>
      </h2>
      <div id="transcription7" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head7">
        <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>

Tieni presente che

Video.js offre un’implementazione cross-browser delle tracce audio, a condizione che la tecnologia di riproduzione supporti le tracce audio. Le tracce audio per i file mp4 sono supportate solo da Safari, altri browser non supportano la riproduzione mp4 con più tracce audio. L’unico modo per fornire l’audio multi-traccia cross-browser è l’uso dei formati HLS e/o DASH. Approfondisci su Video.js

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.

Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube.

Coinvolgi il Responsabile per la protezione dei dati (RDP/DPO) della tua amministrazione e ricordati di aggiornare la cookie policy del sito. Designers Italia mette a disposizione il kit Privacy per approfondire questi temi e in particolare uno strumento dedicato alla redazione della Cookie policy che trovi in questa azione del kit.

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 prima dell’installazione di qualunque cookie.

In questo la Pubblica Amministrazione che fa uso di servizi di terze parti come YouTube deve necessariamente specificare l’utilizzo di cookie di tracciamento da parte di piattaforme di terze parti, inserendo inoltre il link alla propria cookie policy all’interno dell’overlay (dove adesso c’è il link a ‘#’). Nella sezione seguente vengono illustrate le funzioni per la gestione delle preferenze con JavaScript.

Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy.

Ricorda per tutti i video

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
  const loadYouTubeVideo = function(videoUrl) {
    const videoEl = document.getElementById("vid1");
    const video = bootstrap.VideoPlayer.getOrCreateInstance(videoEl);
    video.setYouTubeVideo(videoUrl);
  }
</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="/bootstrap-lombardia/dist/svg/sprites.svg#it-video"></use></svg>
      </div>
        <p>Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella <a href="#" class="text-white">cookie policy</a>.
        </p>
      <div class="acceptoverlay-buttons bg-dark">
        <button type="button" class="btn btn-primary" data-bs-accept-from="youtube.com"
        onclick="loadYouTubeVideo('https://youtu.be/_0j7ZQ67KtY')">Accetta</button>
        <div class="form-check">
          <input id="chk-remember" type="checkbox" data-bs-accept-remember>
          <label for="chk-remember">Ricorda per tutti i video</label>
        </div>
      </div>
    </div>
  </div>
  <div>
    <video controls data-bs-video id="vid1"
      class="video-js"
      width="640" height="264">
    </video>
    <div class="vjs-transcription accordion">
      <div class="accordion-item">
        <h2 class="accordion-header " id="transcription-head9">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transcription9" aria-expanded="true" aria-controls="transcription">
            Trascrizione
          </button>
        </h2>
        <div id="transcription9" class="accordion-collapse collapse" role="region" aria-labelledby="transcription-head9">
          <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>
</div>

Gestione delle preferenze con JavaScript

La gestione delle preferenze viene effettuata in maniera automatica dal componente di overlay, per poter gestire le preferenze esistono 3 diverse funzioni

rememberChoice(service, remember): permette di settare la preferenza di un dato servizio (true ricorda la scelta, false solo per questa volta).
isChoiceRemembered(service): dato un servizio, torna true o false a seconda della scelta fatta dall’utente.
clearAllRememberedChoices(): permette di reimpostare tutte le preferenze dell’ utente

Le funzioni viste sopra possono essere importate lato JavaScript

import { cookies } from './util/cookies'

cookies.clearAllRememberedChoices()

oppure utilizzate con il bundle di Bootstrap Italia

<script>
  bootstrap.cookies.clearAllRememberedChoices();
</script>

Plugin

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.