Widget Lecteur vidéo (thématisable)
Le widget Lecteur vidéo (thématisable) vous permet d'intégrer et de lire des vidéos dans vos applications composites. Le lecteur vidéo prend en charge plusieurs options, permettant notamment une lecture automatique, l'ajout d'images miniatures, ou encore le paramétrage de l'apparence des commandes, entre autres. Il s'agit d'un widget dynamique qui prend en charge l'application de thèmes, pour une expérience utilisateur cohérente.
 |
Le lecteur vidéo est disponible en tant que widget et composant Web que vous pouvez personnaliser et importer à partir du ThingWorx Web Component SDK.
|
Anatomie
1. Etiquette du lecteur vidéo
2. Zone de lecture vidéo
3. Miniature d'aperçu
4. Commandes du lecteur
Raccourcis clavier
La table ci-après répertorie les raccourcis clavier que vous pouvez utiliser pour interagir avec ce widget, regroupés par composant.
|
Composant
|
Bouton/Contrôle
|
Touches
|
Description
|
|---|---|---|---|
|
Navigation
|
Contrôle la navigation entre les différents composants du widget.
|
TAB et MAJ + TAB
|
Avancer ou reculer entre les sous-composants du lecteur.
|
|
Lecteur
|
Contrôle de lecture/arrêt
|
ESPACE ou ENTREE
|
Lire ou arrêter la vidéo
|
|
Barre de défilement du temps
|
FLECHE VERS LE HAUT ou VERS LA DROITE
|
Avance rapide de 10 secondes
|
|
|
FLECHE VERS LE BAS ou VERS LA GAUCHE
|
Rembobiner de 10 secondes
|
||
|
PG PREC
|
Avance rapide de 1 minute
|
||
|
PG SUIV
|
Rembobiner de 1 minute
|
||
|
DEBUT
|
Aller au début de la vidéo
|
||
|
FIN
|
Aller à la fin de la vidéo
|
||
|
Audio
|
Bouton Muet
|
ESPACE ou ENTREE
|
Couper ou réactiver le son de la vidéo
|
|
Curseur de volume
|
FLECHE VERS LE HAUT ou VERS LA DROITE
|
Augmenter le volume de 5 %
|
|
|
FLECHE VERS LE BAS ou VERS LA GAUCHE
|
Diminuer le volume de 5 %
|
||
|
DEBUT
|
Régler le volume sur 0 %
|
||
|
FIN
|
Régler le volume sur 100 %
|
||
|
Télécharger
|
Bouton de téléchargement
|
ESPACE ou ENTREE
|
Télécharger le fichier vidéo
|
|
Plein écran
|
Bouton de plein écran
|
ESPACE ou ENTREE
|
Passer en plein écran
|
|
ECHAP
|
Quitter le mode plein écran et revenir au mode fenêtré
|
Configuration de la position des commandes du lecteur
Utilisez la propriété OverlayControls pour configurer la position des commandes du lecteur vidéo. Lorsque cette propriété est définie sur "vrai", les commandes s'affichent au-dessus du contenu vidéo. Lorsqu'elle est définie sur "faux", les commandes s'affichent sous la vidéo. La superposition des commandes réduit l'espace vertical utilisé par le widget.
Ajout d'une miniature
Utilisez la propriété Thumbnail pour afficher une image d'aperçu avant le démarrage de la vidéo. L'image s'affiche à la place de la vidéo jusqu'à ce que l'utilisateur sélectionne le bouton de lecture. Cette fonctionnalité est utile pour donner du contexte, afficher sa marque ou fournir un aperçu du contenu. Lorsque la lecture démarre, la miniature laisse place à la vidéo.
Configuration des paramètres de lecture
Vous pouvez activer la propriété AutoPlay pour démarrer automatiquement la lecture vidéo dès le chargement de l'application composite. Lorsque AutoPlay est activé, le son de la vidéo est désactivé par défaut. Pour activer l'audio, les utilisateurs doivent réactiver manuellement le son de la vidéo après le début de la lecture. Pour configurer l'audio, vous pouvez activer ou désactiver la propriété Mute du widget ou créer des liaisons pour contrôler l'audio de manière dynamique.
Ajout d'un bouton de téléchargement
Utilisez la propriété EnableDownload pour afficher un bouton de téléchargement dans le lecteur. Lorsqu'il est activé, ce bouton permet aux utilisateurs de télécharger la vidéo avec l'URL. Utilisez cette fonctionnalité pour prendre en charge le visionnage hors ligne ou pour partager du contenu vidéo.
|
|
Un message s'affiche lorsque le téléchargement est bloqué en raison d'un paramètre de sécurité, tel que les règles CSP.
|
Configuration des règles CSP
Pour vous assurer que le widget Lecteur vidéo fonctionne correctement lorsque les règles CSP (Content Security Policy) sont activées dans votre environnement ThingWorx, vous devez mettre à jour la directive media-src afin d'inclure les domaines externes à partir desquels vous chargez la vidéo. Par exemple :
media-src 'self' https://cdn.com https://video-location.com;
Pour plus d'informations sur la configuration des règles CSP, consultez la rubrique Content Security Policy.
Propriétés du widget
La table suivante répertorie les propriétés du widget :
|
Nom de propriété
|
Description
|
Type de base
|
Valeur par défaut
|
Liaison possible ? (O/N)
|
Localisable ? (O/N)
|
|---|---|---|---|---|---|
|
Label
|
Spécifie le texte de l'étiquette du widget.
|
STRING
|
O
|
O
|
|
|
LabelAlignment
|
Aligne le texte de l'étiquette à gauche, à droite ou au centre du widget.
|
STRING
|
left
|
N
|
N
|
|
VideoURL
|
Spécifie l'URL de la vidéo à lire.
|
NUMBER
|
Aucun
|
O
|
N
|
|
EnableDownload
|
Ajoute un bouton de téléchargement aux commandes du lecteur qui permettra aux utilisateurs de télécharger la vidéo.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
Thumbnail
|
Spécifie l'image miniature de la vidéo.
|
NUMBER
|
Aucun
|
O
|
N
|
|
AutoPlay
|
Détermine si les vidéos sont lues automatiquement au chargement du widget. Lorsque AutoPlay est activé, la vidéo est lue sans le son.
|
BOOLEAN
|
Faux
|
N
|
N
|
|
Mute
|
Désactive le son de la vidéo.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
OverlayControls
|
Superpose les commandes du lecteur sur la vidéo, ce qui réduit l'espace occupé par le lecteur dans la mise en page. Les commandes ne s'affichent que lorsque vous pointez sur la vidéo. Lorsque la propriété est désactivée, les commandes du lecteur sont visibles à tout moment.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
Width
|
Spécifie la largeur du lecteur vidéo.
|
NUMBER
|
480
|
O
|
N
|
|
Height
|
Spécifie la hauteur du lecteur vidéo.
|
NUMBER
|
314
|
O
|
N
|
|
CustomClass
|
Classe CSS définie par l'utilisateur à appliquer à la div supérieure du widget. Plusieurs classes peuvent être spécifiées, séparées par une espace.
|
NUMBER
|
Aucun
|
O
|
N
|
|
TabSequence
|
Spécifie l'ordre dans la séquence de tabulation du widget.
|
NUMBER
|
0
|
N
|
N
|
Propriétés de validation
La table suivante répertorie les propriétés de validation du widget :
|
Nom de propriété
|
Description
|
Type de base
|
Valeur par défaut
|
Liaison possible ? (O/N)
|
Localisable ? (O/N)
|
|---|---|---|---|---|---|
|
PlaybackErrorMessage
|
Message affiché lorsque le fichier vidéo est bloqué en raison des règles CSP.
|
STRING
|
Jeton : [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]]
Valeur : erreur de lecture
|
O
|
O
|
|
PlaybackErrorMessageDetails
|
Détails affichés sous le message lorsque le fichier vidéo est bloqué en raison des règles CSP.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]]
Assurez-vous que le format vidéo est pris en charge et que votre connexion réseau fonctionne, puis réessayez.
|
O
|
O
|
|
NetworkErrorMessage
|
Message affiché lorsque la vidéo ne se charge pas en raison d'une erreur réseau.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessage]]
Problème réseau
|
O
|
O
|
|
NetworkErrorMessageDetails
|
Détails affichés sous le message lorsque la vidéo ne se charge pas en raison d'une erreur réseau.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]]
Vérifiez votre connexion réseau et réessayez.
|
O
|
O
|
|
DownloadBlockedMessage
|
Message affiché lorsque la vidéo ne peut pas être téléchargée en raison d'un problème de permission d'accès.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]]
Téléchargement bloqué
|
O
|
O
|
|
DownloadBlockedMessageDetails
|
Détails affichés sous le message lorsque la vidéo ne peut pas être téléchargée en raison d'un problème de permission d'accès.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]]
Le téléchargement est bloqué par la plateforme. Assurez-vous que les règles CSP de la plateforme sont correctement configurées et réessayez.
|
O
|
O
|
|
PlaybackBlockedMessage
|
Message affiché lorsque le fichier vidéo est bloqué en raison des règles CSP.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]]
Ce contenu est bloqué
|
O
|
O
|
|
PlaybackBlockedMessageDetails
|
Détails affichés sous le message lorsque le fichier vidéo est bloqué en raison des règles CSP.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]]
Contactez le propriétaire du site pour résoudre ce problème.
|
O
|
O
|
|
ValidationFailureIcon
|
Spécifie l'icône à afficher en cas d'échec de la validation.
|
STRING
|
cds:icon_error
|
N
|
N
|