Widget Lettore video (con tema applicabile)
Il widget Lettore video (con tema applicabile) consente di incorporare e riprodurre video nei mashup. Il lettore video supporta più opzioni, tra cui la riproduzione automatica, l'aggiunta di immagini in miniatura, la verifica dell'aspetto dei controlli e altro ancora. Si tratta di un widget dinamico che supporta l'applicazione di temi per un livello uniforme di percezione e interazione dell'utente con il prodotto.
 |
Lettore video è disponibile come widget e come componente Web che è possibile personalizzare e importare da ThingWorx Web Component SDK.
|
Anatomia
1. Etichetta di Lettore video
2. Area video
3. Miniatura di anteprima
4. Controlli del lettore
Tasti di scelta rapida
La tabella seguente elenca i tasti di scelta rapida che è possibile utilizzare per interagire con questo widget, raggruppati per componente.
Componente | Pulsante/Controllo | Tasti | Descrizione |
|---|---|---|---|
Navigazione | Controlla la navigazione tra i diversi componenti del widget. | TAB e MAIUSC+TAB | Spostamento avanti o indietro tra i sottocomponenti nel lettore. |
Lettore | Controllo di riproduzione/interruzione | BARRA SPAZIATRICE o INVIO | Riproduzione o interruzione del video |
Barra della sequenza temporale | FRECCIA SU o FRECCIA DES | Avanzamento rapido di 10 secondi | |
FRECCIA GIÙ o FRECCIA SIN | Riavvolgimento di 10 secondi | ||
PGSU | Avanzamento rapido di 1 minuto | ||
PGGIÙ | Riavvolgimento di 1 minuto | ||
HOME | Spostamento all'inizio del video | ||
FINE | Spostamento alla fine del video | ||
Audio | Pulsante di disattivazione dell'audio | BARRA SPAZIATRICE o INVIO | Disattivazione o riattivazione dell'audio del video |
Dispositivo di scorrimento del volume | FRECCIA SU o FRECCIA DES | Aumento del volume del 5% | |
FRECCIA GIÙ o FRECCIA SIN | Riduzione del volume del 5% | ||
HOME | Impostazione del volume sullo 0% | ||
FINE | Impostazione del volume sul 100% | ||
Scarica | Pulsante Scarica | BARRA SPAZIATRICE o INVIO | Download del file video |
Schermo intero | Pulsante Schermo intero | BARRA SPAZIATRICE o INVIO | Accesso alla modalità schermo intero |
ESC | Chiusura della modalità schermo intero e ritorno alla modalità finestra |
Configurazione del layout dei controlli del lettore
Utilizzare la proprietà OverlayControls per configurare la posizione dei controlli del lettore video. Quando questa proprietà è impostata su true, i controlli vengono visualizzati sul contenuto video. Se è impostata su false, i controlli vengono visualizzati sotto il video. La sovrapposizione dei controlli riduce la quantità di spazio verticale utilizzata dal widget.
Aggiunta di una miniatura
Utilizzare la proprietà Thumbnail per visualizzare un'immagine di anteprima prima dell'inizio del video. L'immagine viene visualizzata al posto del video finché l'utente non seleziona il pulsante di riproduzione. Questa funzionalità è utile per fornire contesto, personalizzazione o un'anteprima del contenuto. Quando inizia la riproduzione, la miniatura viene sostituita dal video.
Configurazione delle impostazioni di riproduzione
È possibile attivare la proprietà AutoPlay per avviare automaticamente la riproduzione del video al caricamento del mashup. Quando la proprietà AutoPlay è attivata, l'audio del video è disattivato per default. Per attivare l'audio, gli utenti devono riattivare manualmente l'audio del video dopo l'avvio della riproduzione. Per configurare l'audio, è possibile attivare o disattivare la proprietà Mute del widget oppure creare associazioni per controllare l'audio dinamicamente.
Aggiungere un pulsante Scarica
Utilizzare la proprietà EnableDownload per visualizzare un pulsante Scarica nel lettore. Se attivato, questo pulsante consente agli utenti di scaricare il video in base all'URL. Utilizzare questa funzione per supportare la visualizzazione offline o per condividere un contenuto video.
| | Viene visualizzato un messaggio quando il download è bloccato a causa di un'impostazione di sicurezza, ad esempio per via di regole CSP. |
Configurazione delle regole CSP
Per assicurarsi che il widget Lettore video funzioni correttamente quando le regole Content Security Policy (CSP) sono attivate nell'ambiente ThingWorx, è necessario aggiornare la direttiva media-src in modo da includere i domini esterni da cui viene caricato il video. Esempio:
media-src 'self' https://cdn.com https://video-location.com;
Per ulteriori informazioni sulla configurazione delle regole CSP, vedere Content Security Policy.
Proprietà del widget
Nella tabella seguente sono elencate le proprietà del widget:
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) |
|---|---|---|---|---|---|
Label | Specifica il testo dell'etichetta del widget. | STRING | Y | Y | |
LabelAlignment | Allinea il testo dell'etichetta a sinistra, a destra o al centro del widget. | STRING | left | N | N |
VideoURL | Specifica l'URL del video da riprodurre. | NUMBER | Nessuno | Y | N |
EnableDownload | Aggiunge un pulsante per il download ai controlli del lettore che consente agli utenti di scaricare il video. | BOOLEAN | False | Y | N |
Thumbnail | Specifica l'immagine in miniatura per il video. | NUMBER | Nessuno | Y | N |
AutoPlay | Specifica se i video vengono riprodotti automaticamente al caricamento del widget. Quando AutoPlay è attivata, il video viene riprodotto con audio disattivato. | BOOLEAN | False | N | N |
Mute | Disattiva l'audio del video. | BOOLEAN | False | Y | N |
OverlayControls | Sovrappone i controlli del lettore sul video, riducendo lo spazio occupato dal lettore nel layout. I controlli vengono visualizzati solo quando si passa il mouse sul video. Se disabilitati, i controlli del lettore sono sempre visibili. | BOOLEAN | False | Y | N |
Width | Specifica la larghezza del lettore video. | NUMBER | 480 | Y | N |
Height | Specifica l'altezza del lettore video. | NUMBER | 314 | Y | N |
CustomClass | Classe CSS definita dall'utente da applicare al div superiore del widget. È possibile inserire più classi, separate da uno spazio. | NUMBER | Nessuno | Y | N |
TabSequence | Specifica l'ordine di tabulazione del widget. | NUMBER | 0 | N | N |
Proprietà della convalida
La tabella seguente contiene un elenco delle proprietà di convalida del widget:
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) |
|---|---|---|---|---|---|
PlaybackErrorMessage | Messaggio da visualizzare quando il file video è bloccato a causa di regole CSP. | STRING | Token: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]] Valore: Errore di riproduzione | Y | Y |
PlaybackErrorMessageDetails | Dettagli da visualizzare sotto il messaggio quando il file video è bloccato a causa di regole CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]] Verificare che il formato video sia supportato e che la connessione di rete funzioni, quindi riprovare. | Y | Y |
NetworkErrorMessage | Messaggio da visualizzare quando il video non viene caricato a causa di un errore di rete. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessage]] Problema di rete | Y | Y |
NetworkErrorMessageDetails | Dettagli da visualizzare sotto il messaggio quando il video non viene caricato a causa di un errore di rete. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]] Controllare la connessione di rete e riprovare. | Y | Y |
DownloadBlockedMessage | Messaggio da visualizzare quando il video non può essere scaricato a causa di un problema di permessi di accesso. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]] Download bloccato | Y | Y |
DownloadBlockedMessageDetails | Dettagli da visualizzare sotto il messaggio quando il video non può essere scaricato a causa di un problema di permessi di accesso. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]] Download bloccato dalla piattaforma. Assicurarsi che le regole CSP della piattaforma siano configurate correttamente e riprovare. | Y | Y |
PlaybackBlockedMessage | Messaggio da visualizzare quando il file video è bloccato a causa di regole CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]] Contenuto bloccato | Y | Y |
PlaybackBlockedMessageDetails | Dettagli da visualizzare sotto il messaggio quando il file video è bloccato a causa di regole CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]] Per risolvere il problema, contattare il proprietario del sito. | Y | Y |
ValidationFailureIcon | Specifica l'icona da visualizzare quando la convalida ha esito negativo. | STRING | cds:icon_error | N | N |