Componente Video player: stesura e revisione contenuti

src/data/content/design-system/componenti/video-player.yaml

@@ -8,7 +8,7 @@ metadata:
 
 seo:
   name: Video player - Designers Italia
-  description: "Componente utile per mostrare video e audio con sottotitoli e trascrizioni, da locale o in streaming"
+  description: "Componente utile per mostrare video dal proprio sito o incorporati da piattaforme terze rispettando privacy e accessibilità."
   image: null
   twitterImage: null
   canonical: null
@@ -28,7 +28,7 @@ components:
     #   addonClasses: bg-success mb-2
     #   screenReaderText: "Stato del componente:"
     column: true
-    subtitle: "Componente utile per mostrare video e audio con sottotitoli e trascrizioni, da locale o in streaming"
+    subtitle: "Componente utile per mostrare video dal proprio sito o incorporati da piattaforme terze rispettando privacy e accessibilità"
     # img: /images/400x300.png #I
     # alt: "" #C
     imgRatio: 1x1
@@ -72,7 +72,9 @@ tabs:
             title: Quando usarlo
             headingLevel: 2
             text: |
-              _In stesura_
+              Il componente video player è utile per mostrare contenuti video nelle pagine del proprio sito. Si può usare per video caricati su un hosting proprio oppure per video provenienti da piattaforme di terze parti, utilizzando la variante con overlay di consenso per la privacy.   
+
+              I video possono essere strumenti preziosi sia dal punto di vista della comunicazione che dell'istruzione. È però importante valutare e curare gli aspetti di privacy e accessibilità dei contenuti prima di pubblicarli, di preferenza tenendo conto del parere di esperti di settore e responsabili della privacy del proprio ente o progetto.    
 
       - full: true
         noSpace: true
@@ -82,7 +84,23 @@ tabs:
             title: Come usarlo
             headingLevel: 2
             text: |
-              _In stesura_
+              - Carica nei parametri del video player i sottotitoli in formato [WebVTT](https://www.w3.org/TR/webvtt1/)
+              - Inserisci la trascrizione o un link a questa nello spazio dedicato.
+              - Implementa il meccanismo di gestione overlay di consenso ogni volta che usi video provenienti da piattaforme di terze parti (ad esempio YouTube). 
+
+              ### Attenzione a
+              - Non forzare il player in modalità "auto-play": lascia all'utente la scelta di farlo iniziare, mettere in pausa o interrompere la visione.
+              - Ottimizza i video per lo streaming se li carichi nel tuo spazio hosting e non in una piattaforma dedicata.   
+              - Se utilizzi video provenienti da piattaforme di terze parti dovrai collegare la tua cookie policy nel meccanismo di overlay di consenso, aggiornare la stessa cookie policy con l'aiuto del responsabile del trattamento dati del tuo ente e implementare un meccanismo per la revoca del consenso, simile ad esempio a quello implementato su questo stesso sito designers.italia.it. 
+
+              ### Buone pratiche per i contenuti
+              - È preferibile inserire un'immagine "thumbnail" che sostituisce il video in attesa del caricamento e/o del consenso. 
+              - Ti ricordiamo che i soli sottotitoli generati in automatico da una piattaforma non sono sufficienti, perché è necessario che sia un umano a correggerli o integrarli.
+              - Mostra video che rispondano a bisogni dell'utente, ad esempio semplificando l'accesso a informazioni o fornendo istruzioni su come svolgere attività.
+              - Se il video è uno dei contenuti predominanti della pagina, abbi cura di associargli un titolo e/o una descrizione o testo breve per offrire agli utenti informazioni di contesto preliminari alla visione.
+              - Il contenuto video non dovrebbe essere usato come unica modalità per veicolare informazioni salienti nell'ambito del sito o servizio.
+              - ... 
+
 
       - full: true
         noSpace: true
@@ -106,17 +124,64 @@ tabs:
               *In stesura*
 
   - title: Progettazione
-    sectionsEditorial:
-
+    sectionsEditorial:      
+    
       - full: true
         noSpace: true
         components:
           - name: TextImageCta
-            noSpace: false
+            noSpace: true
             title: Anatomia
             headingLevel: 2
+          - name: ImgFull
+            isDSPreview: true
+            img: /images/design-system/componenti/videoplayer-anatomy.png
+            alt: "Immagine degli elementi che compongono il video player"
+          - name: TextImageCta
+            noSpace: true
             text: |
-              _In stesura_
+              Il video player completo è composto da quattro elementi principali:
+
+              1. **spazio video**: di solito in formato 16:9 o 4:3;
+              2. **pulsante play**: visibile in stato iniziale di attesa comando dall'utente;
+              3. **barra di controllo**: barra di controllo visibile durante la riproduzione, contiene tutti i controlli come play/pausa, volume, timeline, sottotitoli, schermo intero;
+              4. **trascrizione**: spazio predisposto per ospitare la trascrizione dei dialoghi o l'eventuale link a dove si trova.
+
+              ### Barra di controllo
+          - name: ImgFull
+            isDSPreview: true
+            img: /images/design-system/componenti/videoplayer-controlbar-anatomy.png
+            alt: "Immagine degli elementi che compongono la barra di controllo del video player"
+          - name: TextImageCta
+            noSpace: true
+            text: |             
+              La barra di controllo del video player è composta da: 
+
+              1. **contenitore**: definisce un colore di fondo con il colore di brand, può essere leggermente trasparente per non coprire totalmente il video sottostante;
+              2. **pulsante play/pausa**: controlla la riproduzione;
+              3. **pulsante volume ed eventuale slider volume**: controlla il volume audio (on/off) e può essere affiancato da uno slider per controllare il livello di volume audio;
+              4. **timeline del video e indicatore numerico tempo**: indica lo stato di progress della riproduzione;
+              5. **pulsante capitoli**: opzionale, da accesso all'indice dei capitoli se presente;
+              6. **pulsante sottotitoli**: opzionale, da accesso all'indice dei sottotitoli se presenti in più lingue, e funziona come pulsante on/off se in una sola lingua; 
+              7. **pulsante lingue audio**: opzionale, da accesso all'indice delle tracce audio se presenti in più lingue; 
+              8. **pulsante schermo intero**: attiva la modalità riproduzione a schermo intero del dispositivo. 
+
+              ### Overlay di consenso
+          - name: ImgFull
+            isDSPreview: true
+            img: /images/design-system/componenti/videoplayer-consentoverlay-anatomy.png
+            alt: "Immagine degli elementi che compongono l'overlay di consenso per il video player"
+          - name: TextImageCta
+            noSpace: false
+            text: |             
+              L'overlay di consenso, attivabile nel caso di riproduzione di video da piattaforme di terze parti, è composto da:
+
+              1. **fondale**: fondo colorato nel colore di branding con leggera trasparenza, a coprire l'intera area del video player;
+              2. **icona video**;
+              3. **descrizione**: testo che spiega la CTA che segue e invita alla consultazione della Cookie policy;
+              4. **opzione ricorda per tutti i video**: opzionale, attiva il meccanismo di memorizzazione delle preferenze utente del sito, se presente;
+              5. **pulsante accetta**: call to action primaria valida solo per questo video se non presente l'opzione di cui al punto 4. 
+
 
       - full: true
         noSpace: true
@@ -126,7 +191,9 @@ tabs:
             title: Comportamento
             headingLevel: 2
             text: |
-              *In stesura*
+              Tutte le varianti di video player sono **responsive**, quindi si adattano alla viewport di qualsiasi dispositivo.
+
+              Nel caso di utilizzo di video da piattaforme di terze parti l'overlay di consenso appare in automatico sopra ogni video player se l'utente non ha accettato la Cookie policy specifica. Isolando il browser dell'utente dalla piattaforma di terze parti a meno non sia specificatamente accettato.  
 
       - full: true
         noSpace: true
@@ -136,7 +203,7 @@ tabs:
             title: Specifiche di design
             headingLevel: 2
             text: |
-              *In stesura*
+              _In stesura._
 
 
       - full: true
@@ -189,4 +256,4 @@ tabs:
                 align: middle
                 hidden: true
                 size: sm
-                addonClasses: ms-2
+                addonClasses: ms-2