Widget "Videoplayer" (mit Thema versehbar)
Das Widget "Video-Player" (mit Thema versehbar) ermöglicht es Ihnen, Videos in Ihre Mashups einzubetten und dort wiederzugeben. Der Videoplayer unterstützt mehrere Optionen, darunter die automatische Wiedergabe, das Hinzufügen von Miniaturansichten, das Steuern des Erscheinungsbilds der Steuerelemente und weitere. Es handelt sich um ein reaktionsfähiges Widget, das mit einem Thema versehbar ist, sodass Sie ein einheitliches Benutzererlebnis schaffen können.
 |
Der Videoplayer ist als Widget und als Webkomponente verfügbar, die Sie anpassen und aus dem ThingWorx Web Component SDK importieren können.
|
Anatomie
1. Videoplayer-Beschriftung
2. Videobereich
3. Vorschau-Miniaturansicht
4. Player-Steuerelemente
Tastaturkurzbefehle
Die folgende Tabelle enthält Tastenkombinationen für die Interaktion mit diesem Widget, gruppiert nach Komponente.
|
Komponente
|
Schaltfläche/Steuerelement
|
Tasten
|
Beschreibung
|
|---|---|---|---|
|
Navigation
|
Steuert die Navigation zwischen den verschiedenen Komponenten im Widget.
|
TABULATORTASTE und UMSCHALTTASTE+TABULATORTASTE
|
Wechseln Sie zwischen Unterkomponenten im Player vorwärts oder rückwärts.
|
|
Player
|
Steuerelement zum Abspielen/Anhalten
|
LEERTASTE oder EINGABETASTE
|
Video abspielen oder anhalten
|
|
Zeitachsenleiste
|
AUFWÄRTS- oder RECHTSPFEIL
|
Schnellvorlauf durchführen um 10 Sekunden
|
|
|
ABWÄRTS- oder LINKSPFEIL
|
Zurückspulen um 10 Sekunden
|
||
|
BILD-AUF
|
Schnellvorlauf durchführen um 1 Minute
|
||
|
BILD-AB
|
Zurückspulen um 1 Minute
|
||
|
POS1
|
Zum Anfang des Videos wechseln
|
||
|
ENDE
|
Zum Ende des Videos wechseln
|
||
|
Audio
|
Schaltfläche "Stummschalten"
|
LEERTASTE oder EINGABETASTE
|
Video stummschalten oder Stummschaltung aufheben
|
|
Schieberegler für Lautstärke
|
AUFWÄRTS- oder RECHTSPFEIL
|
Lautstärke um 5 % erhöhen
|
|
|
ABWÄRTS- oder LINKSPFEIL
|
Lautstärke um 5 % verringern
|
||
|
POS1
|
Lautstärke auf 0 % festlegen
|
||
|
ENDE
|
Lautstärke auf 100 % festlegen
|
||
|
Herunterladen
|
Schaltfläche "Herunterladen"
|
LEERTASTE oder EINGABETASTE
|
Videodatei herunterladen
|
|
Vollbild
|
Schaltfläche "Vollbild"
|
LEERTASTE oder EINGABETASTE
|
Vollbild aufrufen
|
|
ESC
|
Vollbild beenden und zum Fenstermodus zurückkehren
|
Layout der Player-Steuerelemente konfigurieren
Verwenden Sie die Eigenschaft OverlayControls, um die Position der Videoplayer-Steuerelemente zu konfigurieren. Wenn diese Eigenschaft auf "true" festgelegt ist, werden die Steuerelemente über dem Videoinhalt angezeigt. Wenn diese Eigenschaft auf "false" festgelegt ist, werden die Steuerelemente unter dem Video angezeigt. Durch die Overlay-Steuerelemente wird der vertikale Platz reduziert, den das Widget verwendet.
Miniaturansicht hinzufügen
Verwenden Sie die Eigenschaft Thumbnail, um ein Vorschaubild anzuzeigen, bevor das Video gestartet wird. Das Bild wird anstelle des Videos angezeigt, bis der Benutzer die Schaltfläche für die Wiedergabe auswählt. Diese Funktion ist nützlich, um Kontext, Branding oder eine Vorschau des Inhalts bereitzustellen. Sobald die Wiedergabe beginnt, wird die Miniaturansicht durch das Video ersetzt.
Wiedergabeeinstellungen konfigurieren
Sie können die Eigenschaft AutoPlay aktivieren, um die Videowiedergabe automatisch zu starten, wenn das Mashup geladen wird. Wenn AutoPlay aktiviert ist, wird das Video standardmäßig stummgeschaltet. Benutzer müssen zum Aktivieren des Audios die Stummschaltung des Videos manuell aufheben, nachdem die Wiedergabe gestartet wurde. Zum Konfigurieren des Audios können Sie die Widget-Eigenschaft Mute aktivieren oder deaktivieren oder Bindungen erstellen, um das Audio dynamisch zu steuern.
Schaltfläche zum Herunterladen hinzufügen
Verwenden Sie die Eigenschaft EnableDownload, um eine Schaltfläche zum Herunterladen im Player anzuzeigen. Wenn diese Schaltfläche aktiviert ist, können Benutzer das Video anhand der URL herunterladen. Verwenden Sie diese Funktion, um eine Möglichkeit für die Offline-Wiedergabe oder eine Möglichkeit zum Teilen von Videoinhalten anzubieten.
|
|
Eine Meldung wird angezeigt, wenn der Download aufgrund einer Sicherheitseinstellung, wie z.B. CSP-Regeln, blockiert ist.
|
CSP-Regeln konfigurieren
Damit das Widget "Videoplayer" ordnungsgemäß funktioniert, wenn CSP-Regeln (Content Security Policy) in Ihrer ThingWorx Umgebung aktiviert sind, müssen Sie die Anweisung media-src so aktualisieren, dass die externen Domänen eingeschlossen sind, aus denen Sie das Video laden. Beispiel:
media-src 'self' https://cdn.com https://video-location.com;
Weitere Informationen zum Konfigurieren von CSP-Regeln finden Sie unter Content Security Policy.
Widget-Eigenschaften
In der folgenden Tabelle sind die Widget-Eigenschaften aufgeführt:
|
Eigenschaftenname
|
Beschreibung
|
Basistyp
|
Standardwert
|
Bindung möglich? (J/N)
|
Lokalisierbar? (J/N)
|
|---|---|---|---|---|---|
|
Label
|
Gibt den Text für die Widget-Beschriftung an.
|
STRING
|
J
|
J
|
|
|
LabelAlignment
|
Richtet den Beschriftungstext links, rechts oder in der Mitte des Widgets aus.
|
STRING
|
left
|
N
|
N
|
|
VideoURL
|
Gibt die URL des abzuspielenden Videos an.
|
NUMBER
|
-
|
J
|
N
|
|
EnableDownload
|
Fügt den Player-Steuerelementen eine Schaltfläche zum Herunterladen hinzu, mit der Benutzer das Video herunterladen können.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
Thumbnail
|
Gibt das Miniaturansicht-Bild für das Video an.
|
NUMBER
|
-
|
J
|
N
|
|
AutoPlay
|
Gibt an, ob Videos automatisch wiedergegeben werden, sobald das Widget geladen wird. Wenn AutoPlay aktiviert ist, wird das Video stummgeschaltet wiedergegeben.
|
BOOLEAN
|
False
|
N
|
N
|
|
Mute
|
Schaltet das Video stumm.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
OverlayControls
|
Blendet die Player-Steuerelemente als Overlay über dem Video ein und reduziert so den Platz, den der Player im Layout einnimmt. Die Steuerelemente werden nur angezeigt, solange der Benutzer mit der Maus auf das Video zeigt. Wenn diese Option deaktiviert ist, sind die Player-Steuerelemente immer sichtbar.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
Width
|
Gibt die Breite des Videoplayers an.
|
NUMBER
|
480
|
J
|
N
|
|
Height
|
Gibt die Höhe des Videoplayers an.
|
NUMBER
|
314
|
J
|
N
|
|
CustomClass
|
Benutzerdefinierte CSS-Klasse für das oberste div-Element des Widgets. Es können mehrere Klassen, getrennt durch ein Leerzeichen, eingegeben werden.
|
NUMBER
|
-
|
J
|
N
|
|
TabSequence
|
Gibt die Reihenfolge der Registerkarten im Widget an.
|
NUMBER
|
0
|
N
|
N
|
Validierungseigenschaften
In der nachfolgenden Tabelle sind die Widget-Validierungseigenschaften aufgeführt.
|
Eigenschaftenname
|
Beschreibung
|
Basistyp
|
Standardwert
|
Bindung möglich? (J/N)
|
Lokalisierbar? (J/N)
|
|---|---|---|---|---|---|
|
PlaybackErrorMessage
|
Die Meldung, die angezeigt wird, wenn die Videodatei aufgrund von CSP-Regeln blockiert ist.
|
STRING
|
Token: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]]
Wert: Wiedergabefehler
|
J
|
J
|
|
PlaybackErrorMessageDetails
|
Die Details, die unter der Meldung angezeigt werden, wenn die Videodatei aufgrund von CSP-Regeln blockiert ist.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]]
Stellen Sie sicher, dass das Videoformat unterstützt wird und Ihre Netzwerkverbindung funktioniert, und versuchen Sie es erneut.
|
J
|
J
|
|
NetworkErrorMessage
|
Die Meldung, die angezeigt wird, wenn das Video aufgrund eines Netzwerkfehlers nicht geladen werden kann.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessage]]
Netzwerkproblem
|
J
|
J
|
|
NetworkErrorMessageDetails
|
Die Details, die unter der Meldung angezeigt werden, wenn das Video aufgrund eines Netzwerkfehlers nicht geladen werden kann.
|
STRING
|
[[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]]
Überprüfen Sie Ihre Netzwerkverbindung, und versuchen Sie es erneut.
|
J
|
J
|
|
DownloadBlockedMessage
|
Die Meldung, die angezeigt wird, wenn ein Video aufgrund eines Problems mit den Zugriffsberechtigungen nicht heruntergeladen werden kann.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]]
Download blockiert
|
J
|
J
|
|
DownloadBlockedMessageDetails
|
Die Details, die unter der Meldung angezeigt werden, wenn das Video aufgrund eines Problems mit den Zugriffsberechtigungen nicht heruntergeladen werden kann.
|
STRING
|
[[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]]
Der Download wird von der Plattform blockiert. Stellen Sie sicher, dass die CSP-Regeln der Plattform ordnungsgemäß konfiguriert sind, und versuchen Sie es erneut.
|
J
|
J
|
|
PlaybackBlockedMessage
|
Die Meldung, die angezeigt wird, wenn die Videodatei aufgrund von CSP-Regeln blockiert ist.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]]
Dieser Inhalt ist blockiert.
|
J
|
J
|
|
PlaybackBlockedMessageDetails
|
Die Details, die unter der Meldung angezeigt werden, wenn die Videodatei aufgrund von CSP-Regeln blockiert ist.
|
STRING
|
[[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]]
Wenden Sie sich an den Websitebesitzer, um dieses Problem zu beheben.
|
J
|
J
|
|
ValidationFailureIcon
|
Gibt an, welches Symbol angezeigt werden soll, wenn die Validierung fehlschlägt.
|
STRING
|
cds:icon_error
|
N
|
N
|