Der Videoplayer ist der rechteckige Bereich, in dem der Videoinhalt im Viewer angezeigt wird.
Wenn die Abmessungen des abgespielten Videos nicht mit den Abmessungen des Videoplayers übereinstimmen, wird der Videoinhalt innerhalb des Rechteckanzeigebereichs des Videoplayers zentriert.
Die folgende CSS-Klassenauswahl steuert das Erscheinungsbild des Videoplayers:
.s7interactivevideoviewer .s7videoplayer
CSS-Eigenschaften des Videoplayers
background-color |
Hintergrundfarbe der Haupt-Ansicht. |
Sie können die Fehlermeldung lokalisieren, die angezeigt wird, wenn das System das Video nicht abspielen kann.
Siehe Lokale Anpassung der Elemente der Benutzeroberfläche.
Beispiel: Zum Einrichten eines Video-Viewers mit einer Videoplayer-Größe von 512 x 288 Pixel.
.s7interactivevideoviewer .s7videoplayer{
background-color: transparent;
}
Untertitel werden in einen internen Container im Videoplayer eingefügt. Die Position dieses Containers wird von unterstützten WebVTT-Positionierungsoperatoren gesteuert. Der Beschriftungstext selbst befindet sich in diesem Container und sein Stil wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7interactivevideoviewer .s7videoplayer .s7caption
CSS-Eigenschaften von Untertiteln
background-color |
Hintergrund für Bildunterschrift |
color |
Untertitel-Textfarbe schließen |
font-Gewichtung |
Gewichtung der Bildunterschrift |
font-size |
Schriftgröße der Bildunterschrift. |
font-family |
Geschlossene Beschriftungsschrift. |
So richten Sie den Bildunterschriften-Text auf einem halbtransparenten schwarzen Hintergrund auf 14 Pixel (hellgrau, Arial) ein:
.s7interactivevideoviewer .s7videoplayer .s7caption {
background-color: rgba(0,0,0,0.75);
color: #e6e6e6;
font-weight: normal;
font-size: 14px;
font-family: Arial,Helvetica,sans-serif;
}
Das Erscheinungsbild der Pufferanimation wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7interactivevideoviewer .s7videoplayer .s7waiticon
CSS-Eigenschaften des Wartezeichens
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite des Animationssymbols |
height |
Höhe des Animationssymbols |
margin-left |
Animationssymbol links, normalerweise minus die Hälfte der Breite des Symbols. |
margin-top |
Animationssymbole am oberen Rand, normalerweise minus der Hälfte der Höhe des Symbols. |
background-image |
Knob-Grafik. |
Beispiel: Um eine Pufferung mit einer Breite von 101 Pixeln und einer Höhe von 29 Pixeln einzurichten, müssen Sie eine Animation mit Pufferung einrichten:
.s7interactivevideoviewer .s7videoplayer .s7waiticon {
width: 101px;
height: 29px;
margin-left: -50px;
margin-top: -15px;
background-image: url(images/sdk/busyicon.gif);
}