@italia/video 1.0.0-alpha.17 → 1.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/custom-elements.json +149 -149
  2. package/dist/src/it-video.js +672 -321
  3. package/dist/src/it-video.js.map +1 -1
  4. package/package.json +9 -9
package/custom-elements.json CHANGED
@@ -2,6 +2,155 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "stories/it-video.stories.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "variable",
11
+ "name": "meta",
12
+ "default": "{ title: 'Componenti/Video player', tags: ['a11y-ok', 'web-component'], component: 'it-video', args: { src: 'https://vjs.zencdn.net/v/oceans.webm', poster: '', type: 'video/mp4', options: undefined, track: [], consentOptions: {}, lang: 'it', translations: { it: itLang as any }, initPlugins: '', }, argTypes: { src: { control: 'text', description: 'Sorgente del video' }, poster: { control: 'text', description: \"Sorgente dell'immagine di anteprima\" }, type: { control: 'text', description: 'Tipo del video.', table: { defaultValue: { summary: 'video/mp4' } } }, options: { control: 'object', description: 'Opzioni per il video player. https://videojs.com/guides/options/ qui tutte le opzioni disponibili.', }, track: { control: 'text', table: { defaultValue: { summary: '[{kind:\"chapter\", src: \"/path/file.ext\", srclang:\"it\", label: \"Capitoli\", default: true }]', }, }, description: 'Tracce per didascalie, sottotitoli, capitoli e descrizioni. Nel campo `kind`, indica la tipologia di traccia fra <ul><li>captions</li><li>subtitles</li><li>description</li><li>chapters</li><li>metadata</li></ul>', }, consentOptions: { name: 'consent-options', control: 'object', description: 'Oggetto per la configurazione del consenso dei cookie. <br/>Di default viene salvata una variabile nel localstorage con lo stesso nome del type del video, ma puoi personalizzarla passando in `consentOptions` un valore per `consentKey`. <br/>Inoltre, quando viene dato il consenso permanente per i cookie, puoi personalizzare il comportamento passando in questo oggetto due funzioni specifiche per la gestione della memorizzazione del consenso: `onAccept` e `isAccepted`.', table: { defaultValue: { summary: '{}', }, }, }, lang: { control: 'select', options: ['it', 'en', 'fr', 'de', 'es'], description: \"Lingua del player di cui verrano usate le corrispondenti 'translations'\", table: { defaultValue: { summary: 'it' } }, }, translations: { control: 'object', description: 'Traduzioni del player per le diverse lingue. Di base è disponibile solo la lingua italiana. Usa questa prop per aggiungere le traduzioni in altre lingue. ', }, initPlugins: { name: 'init-plugins', control: 'text', description: 'Nome della propria funzione presente nella window che verrà invocata da video.js per inizializzare eventuali plug-in aggiuntivi definiti dallo sviluppatore.', }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<VideoProps>"
13
+ },
14
+ {
15
+ "kind": "variable",
16
+ "name": "EsempioInterattivo",
17
+ "type": {
18
+ "text": "Story"
19
+ },
20
+ "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
21
+ },
22
+ {
23
+ "kind": "variable",
24
+ "name": "ConTrascrizione",
25
+ "type": {
26
+ "text": "Story"
27
+ },
28
+ "default": "{ ...meta, name: 'Con trascrizione', render: (params) => html` ${renderComponent({ ...params, translations: undefined, slot: html`<it-accordion class=\"vjs-transcription\"> <it-accordion-item> <span slot=\"heading\" id=\"transcription-head4\">Trascrizione</span> <div slot=\"content\"> 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> </it-accordion-item> </it-accordion>`, })}`, }"
29
+ },
30
+ {
31
+ "kind": "variable",
32
+ "name": "SottotitoliDidascalieCapitoliEDescrizioni",
33
+ "type": {
34
+ "text": "Story"
35
+ },
36
+ "default": "{ ...meta, name: 'Sottotitoli, didascalie, capitoli e descrizioni', render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
37
+ },
38
+ {
39
+ "kind": "variable",
40
+ "name": "ImmagineDiAnteprima",
41
+ "type": {
42
+ "text": "Story"
43
+ },
44
+ "default": "{ ...meta, name: 'Immagine di anteprima', parameters: { docs: { description: { story: ` Per aggiungere un’immagine di anteprima come copertina al video, usa l’attributo \\`poster\\` inizializzato con l'url dell’anteprima. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Attenzione</span></div> <p>Le immagini caricate come copertina devono rispettare la stessa \\`aspect ratio\\` del video per una corretta visualizzazione. </p></div></div> `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
45
+ },
46
+ {
47
+ "kind": "variable",
48
+ "name": "Streaming",
49
+ "type": {
50
+ "text": "Story"
51
+ },
52
+ "default": "{ ...meta, // name: 'Streaming', parameters: { docs: { description: { story: ` Per garantire una buona esperienza utente è fondamentale scegliere il formato di riproduzione più adatto. I formati video MP4 o WEBM, pur essendo i più supportati, non sono la soluzione migliore in termini di performance e ottimizzazione della banda. I formati di streaming HLS e DASH, invece, si adattano alla larghezza di banda disponibile, evitando così interruzioni o rallentamenti durante la visualizzazione, e consentono di distribuire il contenuto su diverse piattaforme e dispositivi, aumentando la portabilità del video. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Suggerimento</span></div><p>FFmpeg è uno strumento di conversione multimediale open-source che ti consente di convertire facilmente i file MP4 in formati adattivi come HLS o DASH a bitrate variabile per adattare la qualità del video alle diverse velocità di connessione degli utenti. Approfondisci sul <a href=\"https://ffmpeg.org/\">sito di FFmpeg</a>.</p></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): il browser può rifiutare l’accesso alle risorse audio e video, impedendo la corretta riproduzione del contenuto multimediale. Per superare questo problema, configura correttamente il server che fornisce le risorse audio e video, consentendo l’accesso a domini esterni tramite le policy CORS. Di seguito un esempio in formato MPEG-DASH: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd', type: 'application/dash+xml', poster: './assets/video/ElephantsDream.mp4-poster16.gif', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, { kind: 'chapters', src: './assets/video/chapters-it.vtt', srclang: 'it', label: 'Italiano' }, { kind: 'chapters', src: './assets/video/chapters-en.vtt', srclang: 'en', label: 'English' }, { kind: 'chapters', src: './assets/video/chapters-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
53
+ },
54
+ {
55
+ "kind": "variable",
56
+ "name": "GestirePiuTracceAudio",
57
+ "type": {
58
+ "text": "Story"
59
+ },
60
+ "default": "{ ...meta, name: 'Gestire più tracce audio', parameters: { docs: { description: { story: ` Usare più tracce audio in un video può migliorare l'accessibilità del contenuto, ad esempio aggiungendo tracce audio descrittive per le persone non vedenti o tracce audio in lingue diverse. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Formati supportati</span></div> <p>Video.js offre un’implementazione cross-browser delle tracce audio, a condizione che la tecnologia di riproduzione le supporti. Poiché la riproduzione multi-traccia in formato MP4 è supportata solo da Safari, l'uso dei formati HLS e/o DASH è l'unica soluzione per offrire audio multi-traccia cross-browser. <a href=\"https://videojs.com/guides/audio-tracks/\">Approfondisci la guida di Video.js sulle tracce audio</a></p> </div></div> Per tutte le opzioni disponibili, [consulta la documentazione di VideoJS](https://videojs.com/guides/options/) Di seguito un esempio in formato HLS multilingua: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamHLS/ElephantsDream.mp4.m3u8', type: 'application/x-mpegURL', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
61
+ },
62
+ {
63
+ "kind": "variable",
64
+ "name": "EmbedDaPiattaformeTerze",
65
+ "type": {
66
+ "text": "Story"
67
+ },
68
+ "default": "{ ...meta, name: 'Embed da piattaforme terze', parameters: { docs: { description: { story: ` Il player Video.js permette anche di incorporare video provenienti da altre piattaforme come YouTube, senza doverli caricare sul proprio sito web. Quando si incorporano video di terze parti, alcune informazioni degli utenti (come dati di navigazione o indirizzo IP) possono essere condivise con le piattaforme terze. Per garantire la conformità ai requisiti di privacy, usa questa funzionalità insieme all'overlay di accettazione del consenso. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Nota</span></div> <p>Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube.</p> </div></div> <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Responsabilità della privacy</span></div> <p>Coinvolgi il Responsabile per la protezione dei dati (RDP/DPO) della tua amministrazione e ricordati di aggiornare la cookie policy del sito. Puoi usare il [kit Privacy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/) di Designers Italia per approfondire questi temi e [redarre la cookie policy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/rispetta-la-privacy-per-il-go-live-di-un-sito/).</p> </div></div> ### 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. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Obblighi</span></div> <p>Per 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.</p> </div></div> L'overlay di consenso viene automaticamente istanziato dal componente se si tratta di un video Youtube. Per personalizzare il comportamento sulle scelte effettuate nell'overlay di consenso, è possibile passare al componente \\`<it-video>\\` l'attributo \\`consentOptions\\` con il seguente formato: \\`\\`\\`js consentOptions = { consentKey?: string; //nome della variabile da usare nel localStorage per il salvataggio della preferenza sul consenso. Di default è 'youtube' per i video di Youtube. onAccept?: Function; //(accepted, consentKey)=>{} - funzione che viene invocata quando si accetta il consenso permanente per un video di questa tipologia. Se presente, non viene gestita la preferenza nel localstorage, ma è compito dello sviluppatore implementare la logica di salvataggio delle preferenze isAccepted?: Function; // (consentKey)=>{} - funzione che ritorna un valore booleano (true/false), che indica se l'utente ha gia accettato il consenso permanente per tutti i video di quel tipo. }; \\`\\`\\` Di default sono gia previsti testi e icona, ma è possibile (ed è suggerito) modificare il testo con il link alla pagina della privacy policy. I testi e l'icona sono modificabili attraverso il sistema di traduzioni. Vedi la guida dedicata. `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: 'https://youtu.be/_0j7ZQ67KtY', type: undefined, // translations: undefined, })}`, }"
69
+ },
70
+ {
71
+ "kind": "variable",
72
+ "name": "I18n",
73
+ "type": {
74
+ "text": "Story"
75
+ },
76
+ "default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Oltre all'attributo \\`translations\\` che permette di modificare le traduzioni interne al player, sono disponibili ulteriori stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation = ${JSON.stringify(i18nIT, null, 2)} \\`\\`\\` `, }, }, }, }"
77
+ }
78
+ ],
79
+ "exports": [
80
+ {
81
+ "kind": "js",
82
+ "name": "default",
83
+ "declaration": {
84
+ "name": "meta",
85
+ "module": "stories/it-video.stories.ts"
86
+ }
87
+ },
88
+ {
89
+ "kind": "js",
90
+ "name": "EsempioInterattivo",
91
+ "declaration": {
92
+ "name": "EsempioInterattivo",
93
+ "module": "stories/it-video.stories.ts"
94
+ }
95
+ },
96
+ {
97
+ "kind": "js",
98
+ "name": "ConTrascrizione",
99
+ "declaration": {
100
+ "name": "ConTrascrizione",
101
+ "module": "stories/it-video.stories.ts"
102
+ }
103
+ },
104
+ {
105
+ "kind": "js",
106
+ "name": "SottotitoliDidascalieCapitoliEDescrizioni",
107
+ "declaration": {
108
+ "name": "SottotitoliDidascalieCapitoliEDescrizioni",
109
+ "module": "stories/it-video.stories.ts"
110
+ }
111
+ },
112
+ {
113
+ "kind": "js",
114
+ "name": "ImmagineDiAnteprima",
115
+ "declaration": {
116
+ "name": "ImmagineDiAnteprima",
117
+ "module": "stories/it-video.stories.ts"
118
+ }
119
+ },
120
+ {
121
+ "kind": "js",
122
+ "name": "Streaming",
123
+ "declaration": {
124
+ "name": "Streaming",
125
+ "module": "stories/it-video.stories.ts"
126
+ }
127
+ },
128
+ {
129
+ "kind": "js",
130
+ "name": "GestirePiuTracceAudio",
131
+ "declaration": {
132
+ "name": "GestirePiuTracceAudio",
133
+ "module": "stories/it-video.stories.ts"
134
+ }
135
+ },
136
+ {
137
+ "kind": "js",
138
+ "name": "EmbedDaPiattaformeTerze",
139
+ "declaration": {
140
+ "name": "EmbedDaPiattaformeTerze",
141
+ "module": "stories/it-video.stories.ts"
142
+ }
143
+ },
144
+ {
145
+ "kind": "js",
146
+ "name": "I18n",
147
+ "declaration": {
148
+ "name": "I18n",
149
+ "module": "stories/it-video.stories.ts"
150
+ }
151
+ }
152
+ ]
153
+ },
5
154
  {
6
155
  "kind": "javascript-module",
7
156
  "path": "src/index.ts",
@@ -325,155 +474,6 @@
325
474
  }
326
475
  ]
327
476
  },
328
- {
329
- "kind": "javascript-module",
330
- "path": "stories/it-video.stories.ts",
331
- "declarations": [
332
- {
333
- "kind": "variable",
334
- "name": "meta",
335
- "default": "{ title: 'Componenti/Video player', tags: ['a11y-ok', 'web-component'], component: 'it-video', args: { src: 'https://vjs.zencdn.net/v/oceans.webm', poster: '', type: 'video/mp4', options: undefined, track: [], consentOptions: {}, lang: 'it', translations: { it: itLang as any }, initPlugins: '', }, argTypes: { src: { control: 'text', description: 'Sorgente del video' }, poster: { control: 'text', description: \"Sorgente dell'immagine di anteprima\" }, type: { control: 'text', description: 'Tipo del video.', table: { defaultValue: { summary: 'video/mp4' } } }, options: { control: 'object', description: 'Opzioni per il video player. https://videojs.com/guides/options/ qui tutte le opzioni disponibili.', }, track: { control: 'text', table: { defaultValue: { summary: '[{kind:\"chapter\", src: \"/path/file.ext\", srclang:\"it\", label: \"Capitoli\", default: true }]', }, }, description: 'Tracce per didascalie, sottotitoli, capitoli e descrizioni. Nel campo `kind`, indica la tipologia di traccia fra <ul><li>captions</li><li>subtitles</li><li>description</li><li>chapters</li><li>metadata</li></ul>', }, consentOptions: { name: 'consent-options', control: 'object', description: 'Oggetto per la configurazione del consenso dei cookie. <br/>Di default viene salvata una variabile nel localstorage con lo stesso nome del type del video, ma puoi personalizzarla passando in `consentOptions` un valore per `consentKey`. <br/>Inoltre, quando viene dato il consenso permanente per i cookie, puoi personalizzare il comportamento passando in questo oggetto due funzioni specifiche per la gestione della memorizzazione del consenso: `onAccept` e `isAccepted`.', table: { defaultValue: { summary: '{}', }, }, }, lang: { control: 'select', options: ['it', 'en', 'fr', 'de', 'es'], description: \"Lingua del player di cui verrano usate le corrispondenti 'translations'\", table: { defaultValue: { summary: 'it' } }, }, translations: { control: 'object', description: 'Traduzioni del player per le diverse lingue. Di base è disponibile solo la lingua italiana. Usa questa prop per aggiungere le traduzioni in altre lingue. ', }, initPlugins: { name: 'init-plugins', control: 'text', description: 'Nome della propria funzione presente nella window che verrà invocata da video.js per inizializzare eventuali plug-in aggiuntivi definiti dallo sviluppatore.', }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<VideoProps>"
336
- },
337
- {
338
- "kind": "variable",
339
- "name": "EsempioInterattivo",
340
- "type": {
341
- "text": "Story"
342
- },
343
- "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
344
- },
345
- {
346
- "kind": "variable",
347
- "name": "ConTrascrizione",
348
- "type": {
349
- "text": "Story"
350
- },
351
- "default": "{ ...meta, name: 'Con trascrizione', render: (params) => html` ${renderComponent({ ...params, translations: undefined, slot: html`<it-accordion class=\"vjs-transcription\"> <it-accordion-item> <span slot=\"heading\" id=\"transcription-head4\">Trascrizione</span> <div slot=\"content\"> 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> </it-accordion-item> </it-accordion>`, })}`, }"
352
- },
353
- {
354
- "kind": "variable",
355
- "name": "SottotitoliDidascalieCapitoliEDescrizioni",
356
- "type": {
357
- "text": "Story"
358
- },
359
- "default": "{ ...meta, name: 'Sottotitoli, didascalie, capitoli e descrizioni', render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
360
- },
361
- {
362
- "kind": "variable",
363
- "name": "ImmagineDiAnteprima",
364
- "type": {
365
- "text": "Story"
366
- },
367
- "default": "{ ...meta, name: 'Immagine di anteprima', parameters: { docs: { description: { story: ` Per aggiungere un’immagine di anteprima come copertina al video, usa l’attributo \\`poster\\` inizializzato con l'url dell’anteprima. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Attenzione</span></div> <p>Le immagini caricate come copertina devono rispettare la stessa \\`aspect ratio\\` del video per una corretta visualizzazione. </p></div></div> `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
368
- },
369
- {
370
- "kind": "variable",
371
- "name": "Streaming",
372
- "type": {
373
- "text": "Story"
374
- },
375
- "default": "{ ...meta, // name: 'Streaming', parameters: { docs: { description: { story: ` Per garantire una buona esperienza utente è fondamentale scegliere il formato di riproduzione più adatto. I formati video MP4 o WEBM, pur essendo i più supportati, non sono la soluzione migliore in termini di performance e ottimizzazione della banda. I formati di streaming HLS e DASH, invece, si adattano alla larghezza di banda disponibile, evitando così interruzioni o rallentamenti durante la visualizzazione, e consentono di distribuire il contenuto su diverse piattaforme e dispositivi, aumentando la portabilità del video. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Suggerimento</span></div><p>FFmpeg è uno strumento di conversione multimediale open-source che ti consente di convertire facilmente i file MP4 in formati adattivi come HLS o DASH a bitrate variabile per adattare la qualità del video alle diverse velocità di connessione degli utenti. Approfondisci sul <a href=\"https://ffmpeg.org/\">sito di FFmpeg</a>.</p></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): il browser può rifiutare l’accesso alle risorse audio e video, impedendo la corretta riproduzione del contenuto multimediale. Per superare questo problema, configura correttamente il server che fornisce le risorse audio e video, consentendo l’accesso a domini esterni tramite le policy CORS. Di seguito un esempio in formato MPEG-DASH: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd', type: 'application/dash+xml', poster: './assets/video/ElephantsDream.mp4-poster16.gif', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, { kind: 'chapters', src: './assets/video/chapters-it.vtt', srclang: 'it', label: 'Italiano' }, { kind: 'chapters', src: './assets/video/chapters-en.vtt', srclang: 'en', label: 'English' }, { kind: 'chapters', src: './assets/video/chapters-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
376
- },
377
- {
378
- "kind": "variable",
379
- "name": "GestirePiuTracceAudio",
380
- "type": {
381
- "text": "Story"
382
- },
383
- "default": "{ ...meta, name: 'Gestire più tracce audio', parameters: { docs: { description: { story: ` Usare più tracce audio in un video può migliorare l'accessibilità del contenuto, ad esempio aggiungendo tracce audio descrittive per le persone non vedenti o tracce audio in lingue diverse. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Formati supportati</span></div> <p>Video.js offre un’implementazione cross-browser delle tracce audio, a condizione che la tecnologia di riproduzione le supporti. Poiché la riproduzione multi-traccia in formato MP4 è supportata solo da Safari, l'uso dei formati HLS e/o DASH è l'unica soluzione per offrire audio multi-traccia cross-browser. <a href=\"https://videojs.com/guides/audio-tracks/\">Approfondisci la guida di Video.js sulle tracce audio</a></p> </div></div> Per tutte le opzioni disponibili, [consulta la documentazione di VideoJS](https://videojs.com/guides/options/) Di seguito un esempio in formato HLS multilingua: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamHLS/ElephantsDream.mp4.m3u8', type: 'application/x-mpegURL', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
384
- },
385
- {
386
- "kind": "variable",
387
- "name": "EmbedDaPiattaformeTerze",
388
- "type": {
389
- "text": "Story"
390
- },
391
- "default": "{ ...meta, name: 'Embed da piattaforme terze', parameters: { docs: { description: { story: ` Il player Video.js permette anche di incorporare video provenienti da altre piattaforme come YouTube, senza doverli caricare sul proprio sito web. Quando si incorporano video di terze parti, alcune informazioni degli utenti (come dati di navigazione o indirizzo IP) possono essere condivise con le piattaforme terze. Per garantire la conformità ai requisiti di privacy, usa questa funzionalità insieme all'overlay di accettazione del consenso. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Nota</span></div> <p>Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube.</p> </div></div> <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Responsabilità della privacy</span></div> <p>Coinvolgi il Responsabile per la protezione dei dati (RDP/DPO) della tua amministrazione e ricordati di aggiornare la cookie policy del sito. Puoi usare il [kit Privacy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/) di Designers Italia per approfondire questi temi e [redarre la cookie policy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/rispetta-la-privacy-per-il-go-live-di-un-sito/).</p> </div></div> ### 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. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Obblighi</span></div> <p>Per 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.</p> </div></div> L'overlay di consenso viene automaticamente istanziato dal componente se si tratta di un video Youtube. Per personalizzare il comportamento sulle scelte effettuate nell'overlay di consenso, è possibile passare al componente \\`<it-video>\\` l'attributo \\`consentOptions\\` con il seguente formato: \\`\\`\\`js consentOptions = { consentKey?: string; //nome della variabile da usare nel localStorage per il salvataggio della preferenza sul consenso. Di default è 'youtube' per i video di Youtube. onAccept?: Function; //(accepted, consentKey)=>{} - funzione che viene invocata quando si accetta il consenso permanente per un video di questa tipologia. Se presente, non viene gestita la preferenza nel localstorage, ma è compito dello sviluppatore implementare la logica di salvataggio delle preferenze isAccepted?: Function; // (consentKey)=>{} - funzione che ritorna un valore booleano (true/false), che indica se l'utente ha gia accettato il consenso permanente per tutti i video di quel tipo. }; \\`\\`\\` Di default sono gia previsti testi e icona, ma è possibile (ed è suggerito) modificare il testo con il link alla pagina della privacy policy. I testi e l'icona sono modificabili attraverso il sistema di traduzioni. Vedi la guida dedicata. `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: 'https://youtu.be/_0j7ZQ67KtY', type: undefined, // translations: undefined, })}`, }"
392
- },
393
- {
394
- "kind": "variable",
395
- "name": "I18n",
396
- "type": {
397
- "text": "Story"
398
- },
399
- "default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Oltre all'attributo \\`translations\\` che permette di modificare le traduzioni interne al player, sono disponibili ulteriori stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation = ${JSON.stringify(i18nIT, null, 2)} \\`\\`\\` `, }, }, }, }"
400
- }
401
- ],
402
- "exports": [
403
- {
404
- "kind": "js",
405
- "name": "default",
406
- "declaration": {
407
- "name": "meta",
408
- "module": "stories/it-video.stories.ts"
409
- }
410
- },
411
- {
412
- "kind": "js",
413
- "name": "EsempioInterattivo",
414
- "declaration": {
415
- "name": "EsempioInterattivo",
416
- "module": "stories/it-video.stories.ts"
417
- }
418
- },
419
- {
420
- "kind": "js",
421
- "name": "ConTrascrizione",
422
- "declaration": {
423
- "name": "ConTrascrizione",
424
- "module": "stories/it-video.stories.ts"
425
- }
426
- },
427
- {
428
- "kind": "js",
429
- "name": "SottotitoliDidascalieCapitoliEDescrizioni",
430
- "declaration": {
431
- "name": "SottotitoliDidascalieCapitoliEDescrizioni",
432
- "module": "stories/it-video.stories.ts"
433
- }
434
- },
435
- {
436
- "kind": "js",
437
- "name": "ImmagineDiAnteprima",
438
- "declaration": {
439
- "name": "ImmagineDiAnteprima",
440
- "module": "stories/it-video.stories.ts"
441
- }
442
- },
443
- {
444
- "kind": "js",
445
- "name": "Streaming",
446
- "declaration": {
447
- "name": "Streaming",
448
- "module": "stories/it-video.stories.ts"
449
- }
450
- },
451
- {
452
- "kind": "js",
453
- "name": "GestirePiuTracceAudio",
454
- "declaration": {
455
- "name": "GestirePiuTracceAudio",
456
- "module": "stories/it-video.stories.ts"
457
- }
458
- },
459
- {
460
- "kind": "js",
461
- "name": "EmbedDaPiattaformeTerze",
462
- "declaration": {
463
- "name": "EmbedDaPiattaformeTerze",
464
- "module": "stories/it-video.stories.ts"
465
- }
466
- },
467
- {
468
- "kind": "js",
469
- "name": "I18n",
470
- "declaration": {
471
- "name": "I18n",
472
- "module": "stories/it-video.stories.ts"
473
- }
474
- }
475
- ]
476
- },
477
477
  {
478
478
  "kind": "javascript-module",
479
479
  "path": "src/locales/it.ts",